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
