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: