Basic HTML Elements
ParagraphsHeadings
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: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):
Whereas if we define the width on the Div, we can confine the text:
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: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: 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:
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) |
---|---|---|---|---|
|
|
|
|
|
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: 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 |
---|---|---|
|
|
|
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:
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:
Which will output this:
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:
You can have multiple links open in the same window other than the current one by giving the 'target' attribute the same value:
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:
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:
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:
Content created by Vincent Santa Maria.