Home

CECS 5420.020/026
Dr. Robertson
Web Authoring

---

LTEC 3260.020/026
Dr. Robertson
Web Authoring

---

• [ + ]Course
• General Information
• Syllabus
• Schedule
• Assignments
•  html_elements.html

---

This course is offered by the Department of Learning Technologies in the College of Information at UNT. Undergraduate and Graduate degrees are available. For more information call 1-877-275-7547.

Basic HTML Elements

Paragraphs
Headings
Stylizing Text
Lists
List Options
Nested Lists
Anchor Tags

See textbook for full list of HTML.

---

Paragraphs

In most languages, words are formed into sentences, which are formed into paragraphs. In order to display sentences in paragraph form, we must define the paragraph structure with the Paragraph tags (<p></p>). For example, if I wanted to display two distinct paragraphs, I would have to wrap each paragraph with the Paragraph tags:

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut nunc et risus lobortis vehicula. Proin cursus dolor tempor diam sagittis ut rutrum sem lacinia. Integer porttitor tincidunt nisl, sit amet bibendum elit semper sit amet. Sed pretium, urna hendrerit mattis elementum, velit nisi mollis elit, sed tincidunt quam erat vitae lectus. Cras rutrum sapien et massa condimentum venenatis.</p>

<p> Fusce nunc erat, accumsan ut mollis pulvinar, placerat vel justo. Suspendisse tristique commodo hendrerit. Fusce at magna id ligula bibendum sodales sit amet eu ligula. Vivamus volutpat, diam sit amet volutpat rutrum, nisi nulla lobortis neque, et ornare neque lorem ut ante. Donec sit amet tortor eu tellus placerat viverra a bibendum est. Duis ullamcorper pellentesque luctus. Aliquam molestie accumsan convallis. Quisque bibendum, arcu eu facilisis blandit, nisi nunc viverra lacus, at scelerisque nisi nisi nec sapien.</p>

Output

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut nunc et risus lobortis vehicula. Proin cursus dolor tempor diam sagittis ut rutrum sem lacinia. Integer porttitor tincidunt nisl, sit amet bibendum elit semper sit amet. Sed pretium, urna hendrerit mattis elementum, velit nisi mollis elit, sed tincidunt quam erat vitae lectus. Cras rutrum sapien et massa condimentum venenatis.

Fusce nunc erat, accumsan ut mollis pulvinar, placerat vel justo. Suspendisse tristique commodo hendrerit. Fusce at magna id ligula bibendum sodales sit amet eu ligula. Vivamus volutpat, diam sit amet volutpat rutrum, nisi nulla lobortis neque, et ornare neque lorem ut ante. Donec sit amet tortor eu tellus placerat viverra a bibendum est. Duis ullamcorper pellentesque luctus. Aliquam molestie accumsan convallis. Quisque bibendum, arcu eu facilisis blandit, nisi nunc viverra lacus, at scelerisque nisi nisi nec sapien.

The Latin text is called Lorem Ipsum and is used by designers in the printing and texting industry as dummy text. It is an excerpt from "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) written by Cicero around 45 BC. There is a website where you can have Lorem Ipsum text generated for you, by specifying the number of paragraphs, words, bytes, or lists that you need.

If instead of defining the end of a paragraph you wish to merely start on a new line (carriage return), you can use the Break tag (<br />).

It should be noted that text will fill whatever space it can to its containers width before wrapping and expanding vertically. Therefore, if you wish to have your text in a certain shape, you should wrap your paragraphs within Div tags (<div></div>) and define its width (and height, if you wish). For example, when wrapped in a Div that has no defined width, the Div will expand to the maximum width of its parent container (usually, the Body of the page, but in this case the Fieldset):

HTML

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut nunc et risus lobortis vehicula. Proin cursus dolor tempor diam sagittis ut rutrum sem lacinia. Integer porttitor tincidunt nisl, sit amet bibendum elit semper sit amet. Sed pretium, urna hendrerit mattis elementum, velit nisi mollis elit, sed tincidunt quam erat vitae lectus. Cras rutrum sapien et massa condimentum venenatis.</p>
</div>

Output

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut nunc et risus lobortis vehicula. Proin cursus dolor tempor diam sagittis ut rutrum sem lacinia. Integer porttitor tincidunt nisl, sit amet bibendum elit semper sit amet. Sed pretium, urna hendrerit mattis elementum, velit nisi mollis elit, sed tincidunt quam erat vitae lectus. Cras rutrum sapien et massa condimentum venenatis.

Whereas if we define the width on the Div, we can confine the text:

HTML

<div style="width: 200px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut nunc et risus lobortis vehicula. Proin cursus dolor tempor diam sagittis ut rutrum sem lacinia. Integer porttitor tincidunt nisl, sit amet bibendum elit semper sit amet. Sed pretium, urna hendrerit mattis elementum, velit nisi mollis elit, sed tincidunt quam erat vitae lectus. Cras rutrum sapien et massa condimentum venenatis.</p>
</div>

Output

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut nunc et risus lobortis vehicula. Proin cursus dolor tempor diam sagittis ut rutrum sem lacinia. Integer porttitor tincidunt nisl, sit amet bibendum elit semper sit amet. Sed pretium, urna hendrerit mattis elementum, velit nisi mollis elit, sed tincidunt quam erat vitae lectus. Cras rutrum sapien et massa condimentum venenatis.

Headings

For stylizing words for use in headings, we have the Heading tags (<h1></h1>, <h2></h2>...<h6></h6>); <h1> defines the largest heading, <h6> defines the smallest.

Stylizing Text

For applying certain styles to text, there are a few options. All options can be done with CSS utilizing the Span tags (<span></span>), and some can be done with HTML tags

Type	Bold	Italics	Underlined	Strike-Through	Color
HTML	<b>,<strong>	<i>,<em>	Depreciated	<del>	Depreciated
CSS	font-weight: bold	font-style: italics	text-decoration: underline	text-decoration: line-through	color: #rrggbb
Example	This text is bold!	This text is italicized.	This text is underlined.	This text is struckthrough.	This text is blue.

Lists

Creating a list in your webpage is fairly straight forward. First, you have to decide which type to use: an Ordered List is one where each of the items will be given some hierarchical value, and an Unordered List is one where none of the items listed has any precedence over the others, and a Definition List, which is usually used in a dictionary definition type format. An example of an Ordered List would be:

HTML

<ol>
<li>Prime</li>
<li>Seconde</li>
<li>Tierce</li>
<li>Quarte</li>
<li>Quinte</li>
<li>Sixte</li>
<li>Septime</li>
<li>Octave</li>
</ol>

Output

1. Prime
2. Seconde
   
3. Tierce
   
4. Quarte
   
5. Quint
   
6. Sixte
   
7. Septime
   
8. Octave
   

We use the "<ol>" and "</ol>" tags because we're using an Ordered List. The "<li>" and "</li>" tags are for the List Items. The web browser automatically enumerates the list items for us, there is no need for us to put the numbers in the HTML code.

An example of an unordered list would be:

HTML

<ul>
<li>touch</li>
<li>foul/off-target</li>
<li>no touch</li>
<li>abstain</li>
</ul>

Output

• touch
• foul/off-target
• no touch
  
• abstain

In this case we're using the "<ul>" and "</ul>" tags because we're creating an Unordered List.

An example of a Definition List would be:

HTML

<dl>
<dt>Attack</dt>
<dd>Initial offensive action made by extending the arm and continuously threatening the opponent's target, preceding the launching of the lunge or fl&egrave;che.</dd>
<dt>Parry</dt>
<dd>The defensive action made with the weapon to prevent an offensive action arriving [<em>sic</em>]</dd>
<dt>Ripose</dt>
<dd>The offensive action made by the fencer who has parried the attack.</dd>
</dl>

Output

Attack

Initial offensive action made by extending the arm and continuously threatening the opponent's target, preceding the launching of the lunge or flèche.

Parry

The defensive action made with the weapon to prevent an offensive action arriving [sic]

Ripose

The offensive action made by the fencer who has parried the attack.

List Options

For Ordered Lists, there are different types of nomenclature you can choose from to depict the order in your list. You can have: numerical (as we've already seen, and is the default), alphabetical (upper and lower case), and Roman numeral (upper and lower case). To use the previous example of the Ordered List with the different types of nomenclature would look like the following:

Numeric (default)	Alphabetical (Upper-case)	Alphabetical (Lower-case)	Roman numeral (Upper-case)	Roman numeral (Lower-case)
Prime Seconde Tierce Quarte Quint Sixte Septime Octave	Prime Seconde Tierce Quarte Quint Sixte Septime Octave	Prime Seconde Tierce Quarte Quint Sixte Septime Octave	Prime Seconde Tierce Quarte Quint Sixte Septime Octave	Prime Seconde Tierce Quarte Quint Sixte Septime Octave

To change the nomenclature type, you can either use an HTML or CSS attribute within the "<ol>" tag:

Type	Numeric (default)	Alphabetical (Upper-case)	Alphabetical (Lower-case)	Roman numeral (Upper-case)	Roman numeral (Lower-case)
HTML	<ol type="1">	<ol type="A">	<ol type="a">	<ol type="I">	<ol type="i">
CSS	<ol style="list-style-type: decimal">	<ol style="list-style-type: upper-alpha">	<ol style="list-style-type: lower-alpha">	<ol style="list-style-type: upper-roman">	<ol style="list-style-type: lower-roman">

You can also start on a value other than the first in the list, for example:

Output

4. Quarte
   
5. Quint
   
6. Sixte
   
7. Septime
   
8. Octave
   

You can do this by using one of the following attributes:

Type	Code for Starting Offset
HTML	<ol start="4">
CSS	The CSS work-around for this is a bit extensive, so we'll save it for later...

For Unordered Lists, you can change the display of the "bullet", your options being: disc (default), square, and circle.

Disc (default)	Square	Circle
touch foul/off-target no touch abstain	touch foul/off-target no touch abstain	touch foul/off-target no touch abstain

The "bullet" type can be set with either an HTML or CSS attribute:

Type	Disc (default)	Square	Circle
HTML	<ul type="disc">	<ul type="square">	<ul type="circle">
CSS	<ul style="list-style-type:disc">	<ul style="list-style-type:square">	<ul style="list-style-type:circle">

Nested Lists

You can nest lists (lists within lists), as so:

HTML

<ul>
<li>High Lines
<ul type="circl">
<li>Priime</li>
<li>Tierce</li>
<li>Quarte</li>
<li>Sixte</li>
</ul></li>
<li>Low Lines
<ul type="circle">
<li>Seconde</li>
<li>Quinte</li>
<li>Septime</li>
<li>Octave</li>
</ul></li>
<li>Pronated
<ul type="circle">
<li>Prime</li>
<li>Seconde</li>
<li>Tierce</li>
<li>Quinte</li>
</ul></li>
<li>Supinated
<ul type="circle">
<li>Quarte</li>
<li>Sixte</li>
<li>Septime</li>
<li>Octave</li>
</ul></li>
</ul>

Output

• High Lines
  • Prime
  • Tierce
  • Quarte
  • Sixte
• Low Lines
  • Seconde
  • Quinte
  • Septime
  • Octave
• Pronated
  • Prime
  • Seconde
  • Tierce
  • Quinte
• Supinated
  • Quarte
  • Sixte
  • Septime
  • Octave

It is important that the nested lists go inside of the List Item tags (i.e. between the <li> and </li> tags).

NOTE: Nested lists need to go inside List Elements (<li> tags), not between them:

<ol>
<li>One
<ul>
<li>Sub-one</li>
<li>Sub-two</li>
</ul>
</li>
</ol>

The book has two examples of this and they do it incorrectly (this isn't the exact example they use).

The following code will not validate:

<ol>
<li>One</li>
<ul>
<li>Sub-one</li>
<li>Sub-two</li>
</ul>
</ol>

Anchor Tags

Anchor tags are references to other resources. These resources can be other websites, files, or even other anchors.

When you want to create a link to another website, webpage or file, the syntax is:

HTML

<a href="http://lt.unt.edu">Department of Learning Technlogies</a>

Which will output this:

Output

Department of Learning Technlogies

The 'href' attribute is the Hyperlink REFerence, or where the resource you are wanting to link is located. The browser will render 'Department of Learning Technologies' as a hyperlink according to whatever style rules you may have employed (by default, it is underlined and in a blue color). The 'href' value must be enclosed in quotes.

To open the resource in a new window (or tab, depending on how your browser handles these events), you can add the 'target' attributed like so:

HTML

<a href="http://lt.unt.edu" target="_blank">Department of Learning Technlogies</a>

Output

Department of Learning Technlogies

You can have multiple links open in the same window other than the current one by giving the 'target' attribute the same value:

HTML

<a href="http://lt.unt.edu" target="foo">Department of Learning Technlogies</a>

<a href="http://www.unt.edu" target="foo">University of North Texas</a>

Output

Department of Learning Technlogies

University of North Texas

Anchor tags can also point to other anchor tags (the most notable example is a 'Go to Top' link on a webpage). One anchor tag is the actual anchor, with only a 'name' attribute and no text between the beginning and end tags:

HTML

<a name="top"></a>

The other is the reference, in which the value of the 'href' attribute is constructed of a pound sign (#) in front of the anchor's name if both the anchor and the reference are on the same page:

HTML

<a href="#top">Go to top</a>

Or by appending a pound sign (#) and the anchor's name to the end of a URL if the anchor and reference link are not on the same webpage:

HTML

<a href="http://lt.unt.edu/graduate_cecs.html#instructional_systems">Instructional Systems Technology Master of Science Degree</a>

Output

Instructional Systems Technology Master of Science Degree

---

Content created by Vincent Santa Maria.