Home > Jan's CompLit 101 > Working with the Web > HTML & CSS Basics > Summary

Jan's Working with the Web

HTML & CSS Basics: Summary

Web pages are written in HTML (HyperText Markup Language), which is a coding system that uses tags to identify the parts of a document's logical structure. Browsers have their own rules about how to display the various document parts on the screen. An HTML author cannot totally control the final appearance of an HTML document. Several factors affect what the viewer sees, including the operating system, browser, color depth, resolution, and window size.

You can use a plain text editor, like Notepad, to create and edit HTML documents. A WYSIWYG [What You See Is What You Get] editor, like Dreamweaver, has many helpful features, but cannot really show you what the page looks like on all other computers.

HTML code marks the various parts of the document, like paragraphs, lists, and headings, images, and tables. Most HTML elements are made up of an opening tag, a closing tag and whatever text is between them. An opening tag is formed by surrounding a keyword with the angled brackets < and > , like <h1> and <title>. An opening tag tells where a document part begins. A closing tag looks just like the opening tag except that it puts the slash symbol / before the tag name. This tag tells where the part ends. Some elements, like IMG for an image, do not have a closing tag. The XHTML standard requires these elements to have a closing slash before the right angle bracket, but HTML itself does not require this. All HTML documents must include the HTML and BODY tags.

The key features in HTML are the hyperlink and the wrapping of text to the window. Hyperlinks are created by surrounding text or an image with an anchor tag, <a> , which includes a HREF attribute that has an absolute or relative path as its value. Clicking the hyperlink opens a new document or image.

A tag may have one or more attributes, which can have different values. The HTML and CSS standards include elements, attributes, and values that your browser may not support yet.

Cascading Style Sheets can control the display of the page, like font-family, font-size, alignment, border, color, and the position of the element on the page or in the window. An inline style (STYLE attribute of an element) overrides an internal style sheet (in the HEAD of the page) which overrides an external style sheet (linked to the page). A style in an internal or external style sheet for an HTML element, like H1 or P, will be used every time that element is used on the page. But a style class must applied with the CLASS attribute in the element you want to use that style.

You can create a separate set of styles in an @media print section of an internal or external style sheet to control formatting for printing. An @page section can set the printed page margin, size, and orientation.

Lesson page:	What printed:	With program:	# of pages:
HTML Code Example	List of tags	By hand	1
Create a Page	simple-Lastname-Firstname.htm	browser	1
Create a Page	simple2-Lastname-Firstname.htm	browser	1
List	hector1-Lastname-Firstname.htm	Notepad	1
List	hector1-Lastname-Firstname.htm	browser- bulleted list	1
List	hector2-Lastname-Firstname.htm	browser- numbered list	1
List	hector3-Lastname-Firstname.htm	browser- hobbies added	1
Readable Code	hector4-Lastname-Firstname.htm	text editor - headings formatted	1 or 2
Edit	hector5-Lastname-Firstname.htm	text editor -after styles	2
@media print	hector25-Lastname-Firstname.htm	browser - finished web page	2
Doc to HTML	NZinfo.htm	Word - after save as web page	3
WYSIWYG	WYSIWYG view	simple HTML editor on page. Your name in first line of text.	1
WYSIWYG	source code view	simple HTML editor on page Your name in first line of text.	1

Jan's Working with the Web

HTML & CSS Basics: Summary

HTML Tags and CSS you have used:

What you printed for Web Project 2:

Skills Covered - by Lesson

Skills Covered in Exercises

Important Terms