HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup....

76

Transcript of HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup....

Page 1: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...
Page 2: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

HTML Hypertext

MarkupLanguage

Page 3: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: What is HTML?

Page 4: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

HTML

HTML or Hypertext Markup Language can be thought of as aprogramming language that is used to place text, images andother contents on a webpage. It is the foundation of almost anypage you visit on your browser.

Page 5: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

HTML

• HTML describes the structure of Web pages using markup.Markup languages are designed for the processing,

definition and presentation of text.

• HTML elements are the building blocks of HTML pages.

• HTML elements are represented by tags.

• HTML tags label pieces of content such as "heading","paragraph", "table", and so on.

• Browsers do not display the HTML tags, but use them to renderthe content of the page.

Page 6: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

HTML – Did You Know?

HTML - although not a true programming language it's a greatplace to start if you want to get involved with computers, primarilybecause it's exciting and you can see the results of your learningalmost instantly.

Page 7: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Fill The Blanks

Page 8: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Fill The Blanks Solution

HTML or HyperText Markup Language, can be thought of aprogramming language. It is used to place text, images and othercontents on a webpage. It is the foundation of almost any pageyou visit on your browser. HTML describes the structure of webpages using markup. Mark up languages are designed for theprocessing, definition and presentation of text.HTML elements (or tags) are the building blocks of HTML pages.HTML tags label pieces of content such as “heading”,“paragraph”, “table”, and so on.Browsers do not display the HTML tags, but use them to render thecontent of the page.

Page 9: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Software for HTML

Simple text editors can be used such as ‘Notepad’ for Windows or‘TextEdit’ for Mac OS, as long as you save your files as a .html filei.e. “MyFirstDocument.html”.

Page 10: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

What Does HTML Look Like?

Page 11: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: DOCTYPE

Add the <!DOCTYPE html> and <html> tags to your HTMLdocument.

Page 12: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

<head>, <title>, <body>

The <head> tag is a container for all the head elements. The<head> tag can include a title for the document, styles, andmeta information.

The <title> tag should be used in all HTML documents. The <title>tag:defines a title in the browser toolbar.It provides a title for the page when it is added to favourites.

The <body> tag defines the document's body.

Page 13: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: <head>, <title>, <body>

Copy and execute the HTMLcode:Your output should look likethis:

Page 14: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Blog

Throughout the day you will belearning new HTML tags.

Each time you learn a newtag, if you have time add itonto a html page called“____Blog” e.g. CaseyBlog.html

Page 15: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Pairwise Tags

Important! Tags comes in pairs. A start tag and end tag isnecessary.

<html> … </html>

<head> … </head>

<title> … </title>

<body> … </body>

<h1> … </h1>

<p> … </p>

<i> … </i>

<b> … </b>

Notice the “/” to differentiate from the start tag and end tag.Note: There are exceptions to this rule such as the <!DOCTYPEhtml> tag and later on we will see the <hr> and <img> tag.

Page 16: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Headings: <h1> - <h6>

The <h1> to <h6> tags are used todefine HTML headings.h1 defines the most importantheading. h6 defines the leastimportant heading.

Note: Use h1 to h6 tags only forheadings. Do not use them just tomake text bold or big. Use othertags for that.

Page 17: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Headings: <h1> - <h6>

Page 18: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Headings <h1> - <h6>

Using the tags <h1> to <h6> create a HTML document that outputan Eye Test as shown below:

Page 19: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Headings <h1> - <h6> Solution

Page 20: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Paragraph: <p>

The <p> tag defines a paragraph.Browsers automatically add some space (line spacing) beforeand after each <p> tag.

Activity: Paragraphs <p>

Using the tag <p> create your HTML code to output:

Page 21: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Paragraphs <p> Solution

Page 22: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Commenting: <!-- comment -->

Commenting in HTML is doneby surrounding the desiredcomments with “<!--” and “-->”.

The comments are only seenby those who are editing theHTML file.

Comments are used to notifyothers who will be using theHTML file of any importantinformation regarding theHTML code.

Page 23: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Italic: <i> Bold: <b>

The <i> tag defines a part of text in an alternate tone. The contentof the <i> tag is displayed in italic.

The <b> tag specifies bold text.

Page 24: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Italics

Using the tags <i> and <p> create and execute HTML code tooutput:

Activity: BoldUsing the tags <b> and <p> create and execute HTML code tooutput:

Page 25: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Italics Solution

Activity: Bold Solution

Page 26: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Centre-Align: <center>

The <center> tag is used to center-align text.

Page 27: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Centre-Align

Using the tag <center> create and execute HTML code to output:

Page 28: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Centre-AlignSolution

Page 29: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Anchor: <a>

In HTML, links are defined with the <a> tag: the <a> Anchor isoften associated with an attribute. For example, the ‘href’attribute is used to specify the destination of the link, whereas the‘name’ attribute specifies the name of the link. When clicked it willgo to that specified destination.

< a href= “#...“> combined with <a name= “ ”> can be used for alot of things, for example to create a shortcut to texts in the sameweb page. Note the “#...”

or <a href= “https://www….”> on its own can even link to adifferent website.

Page 30: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Anchor: <a>

Page 31: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Anchor: <a>

www.technocamps.com

Page 32: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Anchor <a>

Using the tag <a> copy and execute HTML code on the previousslide. Afterwards click on the links “Goto Chapter 10” and ”Link toTechnocamps”. What is different between the two links?

Page 33: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Anchor <a>Solution

The “Goto Chapter 10” link keeps the user in the same webpagebut scrolls down to where the text Chapter 10 is.

The “Link to Technocamps” link opens a new browser page andtakes the user to the internet web link.

Page 34: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Horizontal Rule: <hr>

The <hr> element is used to separate content in an HTML page.

Activity: Horizontal Rule: <hr>Run and execute the code above. Afterwards change the codeso that it displays a horizontal line above the heading HTML andanother at the end of the last CSS sentence.

Page 35: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Tags and Uses

For each of the tags displayed below, write a small sentence toexplain what each of them do and when you would use them:

<head>

<body>

<h1><h2> - <h6>

<hr>

<title>

<p><b>

<i>

<!-- -->

<center>

<a>

Page 36: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Tag Levels

For each of the tags displayed below, group the tags accordingto their hierarchical order:

<head>

<body>

<h1><h2> - <h6>

<hr>

<title>

<p><b>

<i>

<!-- -->

<center>

<a>

<!DOCTYPE html> <html>

Page 37: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Tag Levels

Tier 3Tier 0 Tier 1 Tier 2

Page 38: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Tag Levels Solution

Tier 3

<b>

<i>

Tier 0

<!Doctype

html>

<html>

Tier 1

<head>

<body>

Tier 2

<title>

<p>

<h1>

<center>

<a>

<hr>

<h2 – h6>

Page 39: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Tag Level Mystery

Tier ?

<!-- -->

Page 40: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Blockquote:<blockquote>

The <blockquote> tag specifies a section that is quoted fromanother source.Browsers usually indent <blockquote> elements.

Page 41: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Blockquote:<blockquote>

Using the <blockquote> tag and quote the Technocamps missionstatement from www.technocamps.com. You may also quotesomeone famous that you like.

Page 42: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Images: <img>

The <img> tag defines an image in an HTML page.

The <img> tag has two required attributes:• src attribute or the source of the image tag in this example is

the filename of the image: “Technocamps Logo.jpg”.• alt attribute is the alternative text that will display when the

image is unavailable.

Page 43: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Images: <img>

Note: Images are not technically inserted into an HTML page,images are linked to HTML pages. The <img> tag creates aholding space for the referenced image.

src

Source of the

image

alt

Alter-native

text

width

Width of the image

height

Height of the image

Page 44: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Images

Find a copyright free image of Alan Turing on the internet andsave the image in the same location as your HTML files.

Using the <img> tag shown in the previous slide, display an imageof Alan Turing in your HTML document.

Page 45: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Images as a Link

To link an image to another document, simply nest the <img> taginside <a> tags.

Page 46: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Images as a Link

Edit your HTML file so that when you click on the image of AlanTuring it takes you to the Wikipedia website of Alan Turing.

Page 47: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Lists: Ordered and Unordered Lists

Unordered List: <ul>An unordered list starts withthe <ul> tag. Each list itemstarts with the <li> tag.

The list items will be markedwith bullets (small black circles)by default.

Ordered List: <ol>An ordered list starts withthe <ol> tag. Each list itemstarts with the <li> tag.

The list items will be markedwith numbers by default.

Page 48: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Lists: Ordered and Unordered Lists

Page 49: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

List Item: <li>

The <li> tag defines a list item.The <li> tag is used in ordered lists(<ol>), unordered lists (<ul>).

Page 50: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Lists

Create a new HTML file, then create two different lists. One listshould be an ordered list, the other an unordered list. Figure outfrom below which list should be ordered and which should beunordered:

The first list should be a priority to do list of things that you have todo today.

The second list is a list of games you have at home or on yourphone i.e. console games, mobile app games etc.

Again you should use the appropriate list tag.

Page 51: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Ordered List Types: <ol type=“…”>

Page 52: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Ordered List Type

Create three different ordered lists each with a different orderedlist type:

The first list should be a list of your favourite drinks, your mostfavourite being at the top of the list.

The second list is a list of things which you would describe yourselfas e.g. I am quite adventurous I love to going to new placesoutside.

The third list should be a list of things that you dislike the most e.g. Idon’t like being caught in the rain.

Page 53: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Tables:<table>,<tr>,<th>,<td>

An HTML table is defined with the <table> tag.Each table row is defined with the <tr> tag. A table header isdefined with the <th> tag. By default, table headings are boldand centered. A table data/cell is defined with the <td> tag.

Page 54: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Tables:<table>,<tr>,<th>,<td>

Page 55: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Tables

Create a table which contains three columns, each columncontains three rows:

The first column is about Music/Songs.

The second column is the Artist/Band who made those songs.

The third column is the number of times (estimate, unless youactually know the exact number of times) you listened to thatsong.

Page 56: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Match Up

Using the HTML tags on the right, match up each tag with itscorresponding output.Note: some tags may have been used twice.

<p>

<hr>

<b>

<i>

<center>

<h6>

<h1>

<th>

<td>

<tr>

Page 57: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Match Up Solutions

<p>

<hr>

<b>

<i>

<center>

<h6>

<h1>

<th>

<td>

<tr>

Page 58: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Match Up Solutions

<p>

<hr>

<b>

<i>

<center>

<h6>

<h1>

<th>

<td>

<tr>

Page 59: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Match Up Solutions

<p>

<hr>

<b>

<i>

<center>

<h6>

<h1>

<th>

<td>

<tr>

Page 60: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Match Up Solutions

<p>

<hr>

<b>

<i>

<center>

<h6>

<h1>

<th>

<td>

<tr>

Page 61: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Match Up Solutions

<p>

<hr>

<b>

<i>

<center>

<h6>

<h1>

<th>

<td>

<tr>

Page 62: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Match Up Solutions

<p>

<hr>

<b>

<i>

<center>

<h6>

<h1>

<th>

<td>

<tr>

Page 63: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Match Up Solutions

<p>

<hr>

<b>

<i>

<center>

<h6>

<h1>

<th>

<td>

<tr>

Page 64: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Match Up Solutions

<p>

<hr>

<b>

<i>

<center>

<h6>

<h1>

<th>

<td>

<tr>

Page 65: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Match Up Solutions

<p>

<hr>

<b>

<i>

<center>

<h6>

<h1>

<th>

<td>

<tr>

Page 66: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Match Up Solutions

<p>

<hr>

<b>

<i>

<center>

<h6>

<h1>

<th>

<td>

<tr>

Page 67: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: HTML Document

Use the tags learned up until now to mark up the document inyour workbooks.

Page 68: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

CSS

CSS stands for Cascading Style Sheets. CSS describes how HTMLelements are to be displayed on screen, paper, or in other media.CSS saves a lot of work. It can control the layout of multiple webpages all at once

https://www.w3schools.com/html/html_styles.asp

Page 69: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Style: <style>

Add the following code on theright inside your <head> tagand have a look at whathappens to your table(s) inyour HTML file.

After this bit of code is addedto students HTML file, it willformat the table with colours.This is known as HTML styling orCSS. It allows the HTML pagesto look more professional.

Page 70: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Styling Tables

Open up your table activity HTML file for the Table Activity andadd the code from the previous slide inside your <head> tag.

Next, change the font used for your table and the size of thepadding.

Using the internet research different HTML #?????? colour codee.g. #FFFFFF Is the code for the colour black.

Change the colour of your table rows.

Page 71: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Background Colour

https://www.w3schools.com/html/html_styles.asp

Page 72: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Changing Font

https://www.w3schools.com/html/html_styles.asp

Page 73: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Highlighting Text

https://www.w3schools.com/html/html_styles.asp

Page 74: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Find more at w3schools.com

https://www.w3schools.com/html/html_styles.asp

Page 75: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Activity: Create Your Own!

Using the workbook provided to brainstorm ideas, create a differentHTML revision document of a subject of your own choosing and usingthe tags that we have learned your document needs to include atleast one of each tag you have used.

Research and brainstorm ideas of what subject you would like tocreate a revision HTML page on:• What subject to base your revision webpage on,• What topics within that subject will you use,• What sub-topics within those topics,• What information regarding those to pics do you need,• How would you like your webpage laid out.

Extension: Research on different HTML styling / CSS you can use tomake your webpage look much more professional.

Page 76: HTML Hypertext Markup - Technocamps · HTML • HTMLdescribesthestructureofWebpagesusingmarkup. Markup languages are designed for the processing, definitionandpresentationoftext ...

Example:

Subject: Mathematics:Topics:• Numbers

• Prime Factors• Index notation• Venn diagrams

• Algebra• Equations of curves• Basic Algebra

• Geometry and Measures• Polygons

• Statistics• Probability• Histograms

etc.