Slide 1

Slide 2

Purpose Tags are the key to marking up content on your HTML page. Its the tags that mark up sections of the page and are defined (aesthetically) on the CSS page MOST tags begin with an opening tag and end with a closing tag Everything in-between the opening and close takes on the properties assigned to that tag Some properties come automatically with the tag, but CSS can be used to change these properties or add additional ones You cannot make up tags. You must use valid HTML tags or nothing will happen And your page will not validate with the W3C

Slide 3

Margins and Padding To understand some of these tag descriptions, we need to jump ahead a little bit and discuss CSS margin and padding. Margin and padding are two different ways to create white space and move elements around a page. Its important to understand them now because some tags come with automatic margins and/or padding that you will sometimes want to turn off.

Slide 4

Margin Margin definitions create space that pushes off and outwards of an element. Page Heading Photo Navigation Bar In the CSS, there is a bottom margin of a few pixels applied to the Page Heading Photo div. If a margin was not set, there would be no space in-between this sections. They would stack directly under each other.

Slide 5

Padding Padding definitions create space that push inward from the edge of an element. Welcome to your English 3340 course website. You will find your course syllabus in the bulleted list of links to the left. We will be using this site primarily for two purposes. First, it will serve as a storehouse for all of your handouts and sometimes additional readings (as listed on the syllabus). I will also post your blog prompts and questions There is a padding value of 10 pixels or so defined to this column container. If the padding wasnt defined, the text would start at the very edge of the box. That never looks good.

Slide 6

First tag on your page Defines that this is an HTML document Also used to define language and ID for the site (for Search Engine purposes) Closing tag will be the final line of your code on any page Special Considerations None. Will be included on your cut-and-paste sheet

Slide 7

First section of any page- content of this section does not show on the page Head section used to define: Character set of page Title of page Link to CSS page Special Considerations: None, will be included in your cut-and-paste sheet, though title and name of css page will need to be filled in

Slide 8

Child tag of the parent Will define the title of the page as it appears in the tab of a web-browser Should be filled with key-words that help your page be found with search engines Example: Mark D Pepper @ Rhetoric and Composition Special Considerations: None

Slide 9

Everything that is visible on the screen is placed between the body tag opening and closing Therefore, the closing of the tag is usually far down the page Usually second to last, right before closing Special Considerations: 8 pixels of default margin on all sides

Slide 10

Stands for paragraph Used to create paragraphs on your pages Special Considerations: Automatically places 16 pixels of margin above and below the enclosed text. This space can be altered or removed but usually you have no reason to do so.

Slide 11

and creates an unordered list (bullet list) is a list item inside this list tags are children to the parent Example: coffee sugar milk tea coffee sugar milk tea

Slide 12

and Special Considerations: Not only used to make visible bullet lists. Most navigation is built with and but the bullets have been made invisible and sometimes turned horizontal tag comes with 16px of top and bottom margins and 40 pixels of left padding (to create indent) Use CSS if this margin and padding does not work with your design.

Slide 13

Short for anchor, the defines a hyperlink The contents are a bit more complex that tags weve looked at so far since various attributes need to be defined within it Basic Example: Home The href stands for hyperlink reference: this is where you place the URL of the link The text in-between the tags is the text that will turn into the clickable link

Slide 14

Additional properties can be defined besides the href before you close the opening tag Example: Home In this case, the target is being used to open the link in a new page Special Considerations: Links automatically are set to blue underlined text. This can be altered with CSS in many ways Watch punctuation when creating links.

Slide 15

Stands for line break Is a self-closing tag. In other words, you never need to go:. The is sufficient Used when you want text to appear directly under a line without the space that a would create This is some text. That br tag allows this to be right under the previous line. Now I can close the paragraph. This is some text. That br tag allows this to be right under the previous line. Now I can close the paragraph.

Slide 16

,,,, through 9 Heading tags Used to define titles, content sections, and other page divisions #1 should be the largest, boldest text on the page and 2, 3, 4 should increasingly get smaller Special Considerations: Only one use of per page (other h-tags can repeat) comes with 21 pixels of top and bottom margin. Can be turned off with CSS

Slide 17

Links to an image Self-closing tag. You never need a Like the tag, has multiple attributes defined inside of it Example: The alt is an important addition. If the picture fails to load, this text will display. Alt text is also used by screen readers for visually impaired web surfers.

Slide 18

and for bolding text/ for italics Technically these create aesthetic effects, which is usually the job of the CSS. However, for short pieces of text inside a paragraph, this is usually more efficient And still validates with W3C standards Bold this text. Italicize this text. Bold this text. Italicize this text.

Slide 19

Creates a page division. All sites are essentially built with div tags that define page sections: headers, footers, columns, etc. Each requires a name, also called an ID (identification) These can technically be anything, but some names have become common use Example: Note the closing of a div does not repeat the id name The div becomes a parent to a multitude of tags that will be inside of it.

Slide 20

A strange looking tag that sets off a comment intended only to be read in the code Will not display on screen Closes with - - > Very useful to keep track of your closing div tags Example: