HTML/XHTML
My First Page
Discussion
- HTML, HyperText Markup Language
- The predominant markup language for web pages.
- Defines the structure and rules for the page, such as paragraphs, bullets, line breaks, headings, etc.
- Written using "tags" that are descriptors contained in by angle brackets such as <p>, <li>, <h3>, <br />, etc.
- Used to embed text, multimedia, hyperlink, and scripts.
- XHTML, eXtensible HyperText Markup Language
- A partial merge of XML and HTML standards.
- Written for internationalization, accessibility, device-independence, usability and document structuring.
- Elements must be properly nested, always closed, lowercase, and nested within the <html> root element.
- More often renders on hand held devices.
- Renders faster than HTML.
- HTML/XHTML tags
- The user does not see that tag, only the text (or other media) displays.
- The first part of the tag (the part immediately after the left angle bracket <, is the tag element.
- Writing the tag is called coding, and the tag is the code.
- The rules for writing the code are called syntax.
- Many tags have one or more attributes with values that allow modification of the element.
- In XHTML strict, the attribute is assigned the value and the value is always contained in quotes. The = operator is
called the assignment operator and assigns the value to the attribute. For example:
<tag attribute = "value">
<tag attribute = "value" attribute = "value" >
- Elements are either block, non-block, or inline levels
- Block level elements -- may contain inline elements and other block-level elements.
- blockquote tag -- blockquote. Formats as a blockquote (margins indented on both sides of the text).
- div tag -- division. Used with CSS in formatting the page. It is used for grouping and contains other block level elements.
- h tags -- heading. Designated as h1 (the largest), h2, h3, h4, h5, and h6(the smallest).
- p tag -- paragraph. Formats as a paragraph with a space below the text.
- pre tag -- preformatted Preserves the layout defined in the text including whitespace, word wrap, and line breaks.
- form tag -- form. Defines a form and requirest an action attribute. If no action is to be taken, then it is written as:
<form action="">
- table tag -- table. Defines a table and can be nested inside other block elements.
- Non-block level elements
- br tag -- line break. This tag is self-closing and is written <br />
- hr tag -- horizontal rule. This tag is self-closing and is written <hr />
- Inline level elements -- must be contained in a block level element
- Typically contain text and other inline elements.
- When rendered visually, do not usually begin on a new line.
- span tag -- generic containter
- b tag -- bold
- i tag -- italics
- u tag -- underline (be careful that an underline is not mistaken for a link)
- input tag -- used on a form for user input
- img tag -- image
- Comments are not elements, but allow you to insert a comment in the source code.
Comments are ignored by the browser. Also, if you have a coding error that you cannot find, you can comment out the code
and then remove the comment line by line until you pinpoint your error.
- An HTML page
- Certain tags and instructions are required on all html pages.
- Click on template
- Right click and view source.
- Save the source in a folder named public_html on your H drive.
- Explanation of the template page:
- DOCTYPE instruction
- First thing in an HTML document.
- Not a tag but an instruction to the web browser describing the version of HTML in the document.
- Refers to a Document Type Definition (DTD) that specifies the rules for the version used.
- Available DOCTYPEs in XHTML
- XHTML 1.1 -- Must be written as well-formed XML and allows you to add modules.
- XHTML 1.0 strict -- must be written as well-formed XML.
- XHTML 1.0 transitional -- must be written as well-formed XML and allows some deprecated elements.
- XHTML 1.0 frameset -- the same as XHTML transitional and allows the use of frameset content.
- html tag
- Required
- The root element. All other elements contained within html tags.
- xmlns attribute
- Required in XHTML
- Assigned the value http://www.w3.org/1999/xhtml
- Specifies the namespace (a context for identifiers, items which must have unique names) to use for XHTML documents
- lang attribute
- language_code
- Specifies a language code for the content in an element.
- xml:lang attribute
- language_code
- Specifies a language code for the content in an element, in XHTML documents.
- head tag
- Required if the page is well-formed
- First section of the web page
- Encloses other header elements
- Header elements provide search engines with information
- title tag
- Contains the text that appears on the title bar.
- Search engines use the text in the title tag as the link to the page.
- Used as the default name when the page is bookmarked.
- meta element
- Used to describe identify properties of a document
- Name attribute identifies the type or purpose of the meta tag
- Content attribute is the description attached to the name
- Used with the http-equiv attribute to simulate HTTP headers.
- Used to show the encoding (server dependent).
- body tag
- Required
- Holds all the content of the page.
- p tag
- paragraph tag
- block element
- displays space before and after the paragraph
- a tag
- anchor tag
- used as a link
- Used with the href attribute to link to another page.
- Used with href and # to create a bookmark inside a document (requires the location to have the name attribute).
- img tag
- Embeds an image in a web page.
- Requires the attributes src and alt.
- The src attribute gives the source or location of the image.
- The alt attribute contains text which is read by page reading software and displayed when
images do not display.
- Self-closing.
- Notice that the first tag is the html tag and the last tag is the closing html tag. Inside the html tag is the head tag. Notice
that the head tag closes before the body tag opens. You can "nest" tags inside of other tags depending on the type of tag;
however, you must close tags opposite the way they were created. In programming this is called nesting. For XHTML strict
complaince, you must properly nest your elements.
- Since all pages require most of the tags described above, it is much easier to start each page with the template.
- The paragraph at the bottom of the page contains images and links to the W3C site validation service. This is a quick, easy
way to check to see that your HTML is written without errors.
Practice:
- Create a folder named public_html.
- Invoke the Less Than Slash editor, not Notepad.
- Open the template.htm page that you saved earlier.
- Your first web page
- Save your page as firstPage.htm in a subfolder of your public_html folder named HTML.
- Think of a topic that you would like to write about. You may use A Better World if you wish.
Write three paragraphs about how we could have a better world.
- Go to the web and find an image that supports your text. (Google images is a good site.
When you find the image of your choice, right click and save it to your H drive and name it.
- Add the image to your text.
- Remember you must use the alt attribute for your page to validate.
- If you want to change the size of your image, use the width and height attributes. It is rarely a good idea
to make your image larger than the original. If you make it smaller, you must maintain the same aspect ratio.
That means if your image was 350 x 700, that is a 1 to 2 aspect ration. (You can do some rounding but be careful
that you don't distort your image.
- Be sure that all text and your image are contained inside either p tags or div tags.
- Save your firstPage.htm page.
- Check to see that your page validates and make any corrections necessary.