ITSE 1411 Beginning Web
HTML Chapter 2 Discussion

Discussion
- HTML Basics
- h tags - heading.
- Designated as h1 (the largest), h2, h3, h4, h5, and h6 (the smallest).
- Do not confuse the heading tag with the head section of the page.
- A heading tag is usually used in titles and is written as a "block" of text.
- The default of a heading tag is a bold font weight.
- Use heading tags to structure the page and aid in accessibility and usability.
- p tag - paragraph.
- Renders as a block display with space above an below the block. (You do not need to add the double-spaced line after the end of a paragraph.)
- The default alignment for the p tag is left alignment. Overriding the left alignment can be configured by CSS.
- br tag - line break.
- The line break element causes the browser to advance to the next line.
- The br tag is self-closing and is written in XHTML as <br /> and in HTML 5 <br> The JavaScript text is written using XHTML. When copying code from that text, you will need to use <br /> in order to validate the page. Both <br /> and <br> validate in HTML5.
- hr tag - horizontal rule.
- The horizontal rule is used to draw a line across the page.
- The hr tag is self-closing and is written in XHTML as <hr /> and in HTML 5 as <hr> The same situation exists with our JavaScript text with the horizontal rule as the break tag.
- blockquote tag - blockquote.
- Formats as a blockquote (margins indented on both sides of the text).
- Phrase elements.
- Also called logical or inline level elements
- Must be contained in a block level element.
- Table 2.1 on page 34 of your text shows phrase elements. Examples of often used phrase elements described below.
- Typically contain text and other inline elements.
- When rendered visually, do not usually begin on a new line.
- Ordered Lists
- The ordered list tag is used for numbering or lettering (like in an outline) for lists. It is written <ol> and has a closing tag </ol>
- Each "bullet" in the ordered list has the <li> (list item) tag with a closing tag </li>
- The type attribute is not deprecated in HTML 5 for ordered lists. Check table 2.3, page 36 of your Design text for the type values for ordered lists.
- The type attribute (when used) goes in the <ol> tag and can be written
<ol type="A">
- In HTML5 you can use the reversed attribute to indicate descending order.
- The ordered list is written as a block display.
- Unordered Lists
- The tag to describe that an unordered list is to be included is written <ul> When the list is completed you have a closing tag written </ul>
- Each "bullet" in the unordered list has the <li> (list item) tag with a closing tag </li>
- The type attribute to change the default of the bullet is deprecated in HTML 5; therefore, we will not use the type attribute and use CSS to change the look of the bullet.
- Description or Definition Lists
- Description lists are used to organize terms and descriptions. The tag to define the description list is written <dl> The closing tag is </dl>
- Once a description list is defined, the term uses the <dt> tag and the closing tag </dt> tag.
- The term description uses the <dd> tag and the closing tag </dd>
- Special Entity Characters
- Since some characters have special meaning in HTML, you cannot include them in a line of code. You must instead use code that shows the character. The character that is most used is the non-breaking space. When you add white space in HTML, that white space is collapsed into 1 space. This is very convenient except when you actually want more than one space. To get more than one space to render, you must code for each space. Do not forget the semicolon ";". Some browsers will forgive the missing semicolon ";" but some browsers will actually write   on the page instead of the space.
- Table 2.4 on page 42 of the design text shows you more character entities. Additionally, from my home page, I link to a more complete reference on the left column of my page.
- HTML Syntax Validation
- The W3C has a free Markup Validation Service to check for syntax errors. Invalid pages could have side-effects on other code and often renders the page slower.
- Div and Span Elements
- The div and span elements are both used to describe parts of a document that have no other specific method of description.
- The div element defines a division or a section in HTML. When you close a div, it acts as a line break. However, multiple divs in a row (with nothing inside) does not create multiple line breaks.
- The span element in an inline element is used to define an area of text. No line break occurs when using the span element.
- The Design text defines the Span element in Chapter 4 on page 116. However, I find it more logical to discuss the div and span elements at the same time.
- Header Element
- New to HTML5. Used to contain the headings of either a web page document or an area within the document.
- The block display tag is written <header> and </header>
- Nav Element
- New to HTML5. Used to contain a section of navigation links.
- The block display tag is written <nav> and </nav>
- Footer Element
- New to HTML5. Used to contain the footer content of a web page or an area within the document.
- The block display tag is written <footer> and </footer>
- Anchor Element
- The anchor tag used to define a hyperlink
- The anchor begins with <a> and ends with </a> and is used to surround the text or image that the user can click to perform the link.
- Target Attribute
- The target attribute has been redefined in HTML5.
- To open your link in a new browser window or tab, use target="_blank". The decision for either a window or tab is determined by the user.
- A reminder, our JavaScript text used XHTML. When validating XHTML, the target attribute is a validation error.
- Absolute Hyperlinks
- When a url contains a full Internet address, it is called an absolute path or absolute link.
- When you are linking to a page located on a different server, you must always use an absolute link.
- The explanation of an absolute link is
- The attribute href stands for hyperlink reference and is assigned the address of the link.
- url (Uniform Resource Locator or Universal Resource Locator) is the address of the link. An example of the standard form of an address to a page is
http://www.austincc.edu/jscholl/
- http means HyperTextTransferProtocol
- :// is a separator between the protocol and the address
- www stands for World Wide Web
- austincc is the domain name for Austin Community College
- edu is the domain extension and describes the domain as being an educational institution
- / is another separator and designates another folder
- jscholl is my account on the Austin Community College server and has the name jscholl
- Relative Hyperlink
- When pages or files are stored on the same server as your page resides, you can use a relative path or relative link.
- The explanation of a relative link is
- <a href="somePage.htm">. Some page on the same server in the same folder</a>
<a href="subfolder/somePage.htm">Some page on the same server in a sub folder of the current folder</a>
<a href="../somePage.htm">Some page on the same server in a folder above the current folder</a>
- Use the / separator for each folder in the path.
- Use ../ for each hierarchical level higher than the current folder. For example you could link to the testing center page using the relative link from one of my pages to the testing center pages because they are on the same server.
- From the page
http://www.austincc.edu/jscholl/summer2009/javascript/teachers/HTML/links.htm
use
<a href="../../../../../testctr/hours.php
- from the page
http://www.austincc.edu/jscholl
use
<a href="../testctr/hours.php
- Block Anchor
- The block anchor is new to HTML5.
- Used to configure one or more entire elements as a hyperlink.
- Accessibility and Hyperlinks
- To be more meaningful to the user, it is important that the link description is informative. This is particularly true when the user is using a screen reader.
- Site Map
- A site map represents the structure, or organization, of pages in a a website visually.
- Email links
- The mailto link is not as valuable as it once was since many users do not configure their computers to associate with a mail program and Internet Explorer does not allow the body of a message to send through a form using HTML and JavaScript. Most mail coding is now done through server-side scripting. FYI, the link checker does not check mailto links.
- Wireframes and Page Layout
- A wireframe (page schematic or screen blueprint) describes the structure (skeletal framework) of basic page elements.
- Used in web design for page layout.
- The exact content is not required.
- Linking to a specific place on a page uses a fragment identifier (also called named fragment or fragment id).
- A fragment identifier requires 2 parts.
- The tag that identifies the fragment of a web page (the location on the page where the link is going). The tag must be assigned to an id. For example <div id = "content">
- The anchor tag that links to the fragment id.
- For example view your index.htm
- The menu at the top of the page links to locations within the page.
- View the source code of your index page.
The menu code links to different locations on the page
<a href="#template">template</a> |
<a href="#module1">Module 1</a> |
- Each location is coded with an anchor and an id, for example:
<p id="template"><a href="template/template.htm">template</a>
- You can link to a specific location on a different page as long as the specific location has an id and you add the # and the name to the end of the address in the link.