HTML : Hyper Text Markup Language
- <!doctype html> tells the browser this is a html5 document.
- Tags are used to define elements. They have opening <> and closing </> brackets.
- The text between <html> and </html> defines the beginning and end of the page.
- The text between <head> and </head> describe properties of the page.
- The text between <body> and </body> contains the visible page content.
exercise :
- Using Dreamweaver, build simple page
with type. - Save it in the unit1 folder.
- FTP it to your site.
- View it in a browser.
Type Defined by HTML
Much like style sheets are used in InDesign, styles are applied to type in web pages with both html and css.
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph
line breaks : <br>
in-line formatting : bold <b>, ital <i>
<p> Once upon a <i>midnight dreary, </i> while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore,…</p>
Headings defined by HTML are important
- Use HTML headings for headings only. Don’t use headings to make text BIG or bold.
- Search engines use your headings to index the structure and content of your web pages.
- Headings allow your viewers to skim the page.
- H1 headings are the most important, followed by H2 headings, then H3 headings, and so on.
exercise :
-
Copy and paste your poem/lyrics into the <p> section. of the previous exercise.
-
Modify the copy with the following tags: h1, p, br, b and i
- FTP it to your site.
- View it in a browser.
CSS
Type styles can be listed inline, internal (in the head) or in an external style sheets. The benefit of external style sheets is that you can make a change on the one style sheet and it will apply to all pages.
- External style sheets are saved as .css files.
- CSS : cascading style sheets
- A css rule consists of a selector and declaration block:
- h1 { color: blue; font-size: 12px; }
- The declaration block is surrounded by brackets.
- The declarations are separated by semicolons.
- The declarations are composed of properties and values : color is a property and blue is the value.
exercise:
- Create a cascading style sheet named style.css and save it in the unit_1 folder.
- Link the style sheet to your existing exercise file.
- Add tags for H1, H2 and p
- Add the following declarations to each selector and modify them:
color: blue; font-size: 12px; line-height: 18px; - FTP both the html and css files to your site.
- View the html file in a browser. Modify it until it reads well in your browser.
sample pages
type defined by css internally
type defined by css externally
don’t get it? Learn more:
references