IE Class · 2021. 7. 15. · 15 - Copyright © IE Class, Inc. Special Characters • Web browsers...

1

www.ieclass.com - Copyright © IE Class, Inc.

IE ClassUnit 3 – Lesson 1

HTML Tags & Structure


Notice: The IE Class Slide Presentationsare for private classroom use only. Theymay not be modified, redistributed orposted on any website. They may onlybe used with a valid current accountwith IE Class, Inc.

http://www.ieclass.com


2


What is HTML• Hyper Text Markup Language

– HTML documents are documents that contain formatted, or marked up, text.

– HTML is NOT a programming language, it just a formatting language defining how content should be displayed.

– The formatting instructions in HTML are known as tags.


What is HTML• Why HTML 5?

– HTML 5 is the latest's version of the HTML language.

• Designed to standardize development of web content across multiple devices.

• Designed to look the same regardless of device.

• HTML 5 compatible devices expect certain formatting guidelines to be followed:



3


What is HTML• HTML Formatting Guidelines

– Should include the DOCTYPE declaration at the top of the page

– Must include a root element <html> ... </html>

– All tags should be in lower case– All attributes must be quoted– All styles incorporated through the use of

CSS


What is CSS• Cascading Style Sheets

– HTML is used to define the structure of a web page.

– CSS defines how the page looks.– For Example:

• HTML will identify a block of text as a paragraph.

• CSS will define what the font of the text is, the color, placement, background color, etc.



4


Web Page Structure• A web page structure is made up of

various elements.– An element is any part that makes up the

web page:• Images• Paragraphs• Headings• Links• Etc.


Web Page Structure



5


Web Page Structure• Page Elements

– Root Element• This is the web page itself. HTML is designed

for elements to contain other elements so all other parts of the page will be placed on the root element.

– Head & Body Elements• The head and body are the two main parts of

the root element.– Generally anything that works behind the scenes go

in the head element.– Anything you see in your browser window will go in

the body element.– The head and body elements should be included on

all web pages.


Starting Tags



6


Content Container Elements• header

– Defines the subject of information being presented.

– Generally placed at the top of the page, but can also be used to define the top of other elements on the page.

• nav– Defines content as the pages navigation.


Content Container Elements• section

– Used to group content together.– Can be used to group other elements.– Can be used inside other elements to

group content.– Example

• Might be used to create newspaper style columns.



7


Content Container Elements• article

– Defines the primary content on the page.• aside

– Defines secondary content, or content that does not directly relate to the topic of the page.

• Advertisements• Illustrations


Content Container Elements• footer

– defines footer information such as copyrights, or anything that should appear at the bottom of the page or element.

• div– is a generic container element. Might be

used to put content that would not fit in any of the other named containers.



8


Formatting Tags• Formatting tags

– HTML tags that can be used to apply styles to content.


Formatting Tags<h1> ~ </h1> Formats text a top, or first,

level heading.<p> ~ </p> Formats text as a

paragraph.<strong> ~ </strong> Bolds the text it encloses.

<em> ~ </em> Italicizes the text it encloses.

<mark> ~ </mark> Highlights enclosed text.



9


Other Important Tags<br> Forces a line break.

<wbr>Tells the browser that if a line break is need, it should be here, otherwise the break is ignored.

<hr>Horizontal Rule tag. Draws a horizontal line


Basic Tags• Line Breaks <br >

Line 1 <br>Line 2 <br>Line 3 <br>Line 4 <br>

Line 1 Line 2 Line 3Line 4

The line break does not use a separate closing tag because it does not surround any text. It only indicates where a line break should be placed in the flow.



10


Structuring your tags• HTML tags encapsulate (surround) the

text that they are formatting.

• If more than one tag is formatting the text, then the closing tags should be written in reverse order from how they were opened.

<strong><<strong><emem>Text >Text to Formatto Format</</emem></strong>></strong>


Block & Inline Elements• Block Elements

– Groups content together in an isolated box. Other content either flows above or below the element.



11


Block & Inline Elements• Inline Elements

– Applies a style around content without having any effect on the layout of the other content on the page.


Tag Attributes• An attribute is a feature that you

can add to a tag that will allow you to modify how the tag behaves.– Tag Attributes

• Simple adjustments that can be made to an element.

– Style Attributes• Defines the elements styles, how its content

appears.



12


Setting Style Attributes• Added to the opening tag only.• Consists of a property and value.• Written in the following format:

• Additional style property can be added by separating style with semi-colons.

<tag style=“property: value” >

<tag style=“property: value; property: value” >


Colors• We will start out by setting the

background color and text color of elements.– Colors are defined in hexadecimal, or

hex, format.– Defined by declaring the values of Red

Blue and Green.



13


Colors• Hexadecimal is written by defining how

much red, green, and blue should be included.

• Color values range from 0 – f– 0 meaning lowest level, or none.– f meaning highest level.

0 1 2 3 4 5 6 7 8 9 a b c d e f


Colors• Hexadecimal format with two red values,

two blue values, and two green values:

#rrggbb

#ff0000 #00ff00 #0000ff



14


Setting Background Color• Uses the Style Attribute

– Property• background-color:

– Uses any hex color value.

<body style=“background-color: #ff0000”>


Setting Text Color• Uses the Style Attribute

– Property• color:

– Uses any hex color value.

<body style=“color: #ffffff”>



15


Special Characters• Web browsers will only recognize one

space following a word or character, ay additional spaces will be ignored.

• For example, if you were to type a word and press the space bar five times, only the first space would be recognized by the browser.

– To add additional spaces to a web page, HTML includes a set of code called Special Characters.


Special Characters• HTML tags are created between the

< and > brackets– Special characters are created between the &

and ; characters.

– Special characters are the characters and symbols that are not on your keyboard, or that the browser would normally interpret as something else, or ignore.



16


Special Characters Space

< <> >

© ©& &" “


Guided Practice

<!DOCTYPE html><html>

</html>

Open a new document in your text editor. Add the DOCTYPE declaration tag and opening and closing html tags shown below. Add some space between them as written here.



17


Next add the head and body sections to the document. Notice the different color tags. The code in black should already be typed. The new code will always be in maroon.

<html><head>

</head><body>

</body></html>


Next add the tags to your document. The title is always written in the head section of your document.

<html><head><meta charset=“utf-8”><title>Lesson 1</title></head><body>

</body></html>



18


Save the file as lesson1.htm to your Unit 3 directory.Do not close your text editor, but switch to your web browser and open the lesson1.htm file you just saved.The document should be blank, but the title should be shown in the tab or title bar at the top.


Switch back to your text editor and move down to the body region. Add the header container element shown here with the text inside it.

<body><header>

Quotations</header>

</body></html>



19


The content in the heading will be formatted as a level 1 heading. The h1 tag will apply formatting to the text.

<body><header>

<h1>Quotations</h1></header>

</body></html>


Resave your document and refresh your browser. You should now see the heading you just created.



20


Below the heading, add the article container element shown here.

<body><header><h1>Quotations</h1></header><article>

</article></body>


Next add the paragraph content to the article element.

<body><header><h1>Quotations</h1></header><article><p>Nothing great was ever achieved without enthusiasm. Ralph Waldo Emerson</p><p>Knowing yourself is the beginning of all wisdom. Aristotle</p></article></body>



21


Resave your document and refresh your browser. You should now see the two quotes on your page. Notice the size difference in the level 1 heading and the paragraph text.


Page Structure• The page structure

you just created matches the page structure shown here.

• The labs will illustrate page structure in this way.– The page “blue print”

header

article

<body>

</body>



22


Adding Style• After a new house has been built,

generally it is painted, given fancy tiles, fixtures, window treatments, and everything to make it look nice.

• The same is true with web pages.– After building the web page, we can then

add its “interior design”• Background colors• text colors, etc


Adding Style• We will apply styles using style

attributes.– Style attributes are known as inline style

sheets.– Inline style sheets follow the structure

shown here.

<tag style=“property: value” >



23


Next add the inline style sheet to top opening body tag.

<body style=“background-color: #ffffcc”><header><h1>Quotations</h1></header><article>


Resave your document and refresh your browser. The background should now be a light yellow.



24


Next add the inline style to the opening header tag.

<body style=“background-color: #ffffcc”><header style=“background-color: #5ccccc”><h1>Quotations</h1></header><article>


Resave your document and refresh your browser. The header element should now be defined by a light blue background color.



25


Next add the style to the opening article tag.

<body style=“background-color: #ffffcc”><header style=“background-color: #5ccccc”><h1>Quotations</h1></header><article style=“color: #006363 ”><p>Nothing great was ever achieved without enthusiasm. Ralph Waldo Emerson</p><p>Knowing yourself is the beginning of all wisdom. Aristotle</p></article></body>


Resave your document and refresh your browser. The text color of the content in the article element should now be blue.



Date post:	02-Aug-2021
Category:	Documents
Upload:	others
View:	1 times
Download:	0 times

IE Class · 2021. 7. 15. · 15 - Copyright © IE Class, Inc. Special Characters • Web browsers...

Documents