Table of Contents
Lesson Overview
Topic: HTML Language Advanced
Activities & Due Dates: Design a webpage
Opening – HTML Document Structure
Activity 1 – Nested Tags
â˘Whenever you have HTML tags within other HTML tags, you must close the nearest tag first
â˘Example: <H1> <I> The Nation </I> </H1>
Activity 2 – The <TITLE> Tag
â˘Choose the title of your Web page carefully; The title of a Web page determines its ranking in certain search engines
â˘The title will also appear on Favorite lists, History lists, and Bookmark lists to identify your page
Activity 3 – Text Formatting Tags
Activity 4 – Changing the Font
â˘The expression <FONT FACE = âfontnameâ> ⌠</FONT> can be used to change the font of the enclosed text
â˘To change the size of text use the expression <FONT SIZE=n> âŚ. </FONT> where n is a number between 1 and 7
â˘To change the color, use <FONT COLOR=âredâ>âŚ. </FONT>; The color can also be defined using hexadecimal representation ( Example: #ffffff )
â˘These attributes can be combined to change the font, size, and color of the text all at once; For example, <FONT SIZE=4 FACE=âArialâ COLOR=âredâ> âŚ. </FONT>
Activity 5 – Headings
â˘Web pages are typically organized into sections with headings; To create a heading use the expression <Hn>âŚ.</Hn> where n is a number between 1 and 7 â˘In this case, the 1 corresponds to the largest size heading while the 7 corresponds to the smallest size
Activity 6 – Paragraphs, <P> </P>
Activity 7 – Bold, Italic and other Character Formatting Elements
â˘<EM> Emphasis </EM> Browsers usually display this as italics.
â˘<STRONG> STRONG </STRONG> Browsers display this as bold.
â˘<CITE> Citation </CITE> represents a document citation (italics). For titles of books, films, etc. Typically displayed in italics. (A Beginner’s Guide to HTML)
⢠<PRE> Preformatted </PRE> Text enclosed by PRE tags is displayed in a mono-spaced font. Spaces and line breaks are supported without additional elements or special characters.
Activity 8 – HTML colors
â˘<FONT COLOR=â#RRGGBBâ>this text has color</FONT>
â˘Change background color
â˘<BODY BGCOLOR=âcolorâ>
â˘Color table
Activity 9 – Aligning Text
â˘The ALIGN attribute can be inserted in the <P> and <Hn> tags to right justify, center, or left justify the text
â˘For example, <H1 ALIGN=CENTER> The New York Times </H1> would create a centered heading of the largest size
â˘<p align=center>center align </p>
â˘<p align=left>left align </p>
â˘<p align=right>right align </p>
Activity 10 – Inserting Images
â˘Type <IMG SRC = âimage.extâ>, where image.ext indicates the location of the image file
â˘The WIDTH=n and HEIGHT=n attributes can be used to adjust the size of an image
â˘The attribute BORDER=n can be used to add a border n pixels thick around the image
Activity 11 – Inserting a Youtube video
- Tag
- <iframe width=”420″ height=”315â src=”https://www.youtube.com/embed/tgbNymZ7vqY”> </iframe>
- Fullscreen
- <iframe width=”420″ height=”315â src=https://www.youtube.com/embed/tgbNymZ7vqY allowfullscreen> </iframe>
- Control
- <iframe width=”420″ height=”315â src=https://www.youtube.com/embed/tgbNymZ7vqY?controls=1 allowfullscreen> </iframe>
Activity 12 – Links
â˘A link lets you move from one page to another, play movies and sound, send email, download files, and moreâŚ.
â˘A link has three parts: a destination, a label, and a target
â˘To create a link type <A HREF=âpage.htmlâ> label </A>
Activity 13 – Frames
â˘A web page can be made up of multiple HTML pages.
â˘Each page is filled with an HTML document.
â˘E.g.) make a frame page that divides into two pages: header and content
Activity 14 – Frames with links
