Introduction to HTML
What is HTML?
HTML is the standard markup language for creating Web pages. HTML stands for HyperText Markup Language. "Markup
language" means that, rather than using a programming language to perform functions, HTML uses tags to identify
different types of content and the purposes they each serve to the webpage.
- ★ HTML stands for
Hyper Text Markup Language
- ★ HTML describes
structure of a Web page
.
- ★ HTML documents are described by
HTML tags
.
- ★ Each HTML tag describes different element.
HTML versions
| Version |
Year |
| HTML |
1991 |
| HTML2.0 |
1995 |
| HTML3.2 |
1997 |
| HTML4.01 |
1999 |
| XHTML |
2000 |
| HTML5 |
2014 |
HTML Page Structure
There are always two parts to an HTML file: the head and the body.
- ★
head
:
The head contains information about your HTML file, like its title. The title is what we see in the browser’s
title
bar or page tab.
- ★
body
The body is where you put your content, such as text, images, and links. The content in the body is what will be
visible on the actual page.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
- • The
<!DOCTYPE html> declaration defines that this document is an HTML5 document
- • The <html> element is the root element of an HTML page
- • The <head> element contains meta information about the HTML page
- • The <title> element specifies a title for the HTML page (which is
shown in the browser's title
bar or in
the page's tab)
- • The <body> element defines the document's body, and is a container
for all the visible
contents, such as
headings,
paragraphs, images, hyperlinks, tables, lists, etc.
Pay attention to...
- •
Always put <!DOCTYPE html> on the first line. This tells the browser what language it’s reading (in this
case, HTML).
- • Always put <html> on the next line. This starts the HTML document.
- • Always put </html> on the last line. This ends the HTML document.
HTML Element
An HTML element is defined by a
start tag
, some content, and an
end tag
:
<tagname> Content goes here... </tagname>
| Start tag |
Element content |
End tag |
| <h1> |
My First Heading |
</h1> |
| <p> |
My first paragraph |
</p> |
HTML Headings
- • HTML headings are defined with the
<h1> </h1>
to
<h6> </h6>
tags.
- • <h1> defines the most important heading.
- • <h6> defines the least important heading.
HTML Paragraphs
HTML paragraphs are defined with the
<p> </p>
tag:
<p> This is a paragraph. </p>
Pay attention to...
- •
Any number of spaces and newlines will be counted as only one space.
HTML Comment
HTML Comment are defined with the
<!--
and
-->
tag:
<!-- Comments here. -->
- •Comments are not displayed by the browser, but it will help you remember why you did certain things.
- •With comments you can place notifications and reminders in your HTML.
- •Comments tag:
<!-- Comments Here --> (notce that there are at least two dashes on each side)
HTML attributes
- • HTML elements can have
attributes
.
- • Attributes provide additional information about an element.
- • Attributes are always specified in the start tag.
- • Attributes come in name/value pairs like : name = 'value'.
Example
1. The
title attribute for <p></p>:
<p title="our course name">CSCI 4410 Web Technologies</p>
move your cursor above this paragraph:
CSCI 4410 Web Technologies
2. The
href attribute for HTML link tag <a></a>:
<a href="https://lecture.yangxinmtsu.repl.co/4410.html">CSCI 4410 Course Link</a>
3. The
src attribute for HTML image tag <img>:
<img src="image_name.jpg">
HTML Hyperlink
- •HTML link is a hyperlink.
- •Hyperlink is a text or image you can click on, and jump to another document.
HTML links are defined with the
<a> </a>
tag:
<a href="https://lecture.yangxinmtsu.repl.co/4410" target="_blank">CSCI 4410 Course Link</a>
- • In HTML, links are defined with the <a> tag (a stands for anchor).
- • Hyperlink is a text or image you can click on, and jump to another document.
- • The
href
attribute specifies the destination address. The href attribute can be either absolute URL (a full web
address) or local link.
- • The
target
attribute specifies where to open the linked document.
- • The link text is the visible part.
target attribute
| Value |
Description |
| _blank |
Load in a new window |
| _self |
Load in the same frame as it was clicked |
| _parent |
Load in the parent frameset |
| _top |
Load in the full body of the window |
Create a bookmark
- • HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
- • Bookmarks are practical if your website has long pages.
- • To make a bookmark, you have to first create the bookmark (by the
id
attribute), then add a link (#
and the value of
the id attribute) to it.
- • Bookmark is just a link to some tag.
<h1 id="top">This is the top.</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<a href="#top">Go to the top.</a>
HTML Images
- • HTML can display image formats like JPG, PNG, GIF, SVG, ....
- • The <img> tag is empty, it contains attributes only and does not have a closing tag.
- • HTML images are defined with the
<img>
tag:
<img src="mtsu.png" alt="MTSU Campus" width="200px" height="400px">
- •
src
: source image file, can be either local or online.
- •
alt
: specifies an alternate text for an image, if the image cannot be displayed.
- •
width
: image width, the values are specified in pixels.
- •
height
: image height, the values are specified in pixels.
more on src attribute
- • For an online image, we use its
absolute/full url link.
<img src="https://mtsunews.com/wp-content/uploads/2022/07/MT-Tuition-Free-graphic-promo-web.jpg" width="200px" height="200px">
• For a local image, you can use its absolute/full path or relative path
- Q: which one is better for your project?
HTML Lists
Unordered lists
- • An unordered list are defined with
<ul> </ul>
tag.
- • Each list item starts with the
<li>
tag.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
• A
list-style-type
attribute can be added to an unordered list, to define the style of the marker
| list-style-type |
Description |
| disc |
Sets the list item marker to a bullet (default) |
| circle |
Sets the list item marker to a circle |
| square |
Sets the list item marker to a square |
| none |
The list items will not be marked |
Ordered list
- • An Ordered list starts with the
<ol> </ol>
- • Each list item starts with the
<li>
tag.
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
• A
type
attribute can be added to an ordered list, to define the style of the marker
| type |
Description |
| type="1" |
The list items will be numbered with numbers (default) |
| type="A" |
The list items will be numbered with uppercase letters |
| type="a" |
The list items will be numbered with lowercase letters |
| type="I" |
The list items will be numbered with uppercase roman numbers |
| type="i" |
The list items will be numbered with lowercase roman numbers |
Nested lists
<ol type="1">
<li>Coffee</li>
<ul>
<li>Espresso</li>
<li>Cappuccino</li>
</ul>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Table
- • HTML tables allow web developers to arrange data into
rows
and
columns
.
- • Tables are defined with the
<table> </table>
tag.
- •
<th>
Defines a header cell in a table
- • Tables are divided into table rows with the
<tr>
tag.
- • Table rows are divided into table data with the
<td>
tag.
- • If you do not specify a border for the table, it will be displayed without borders:
<table>
<!-- first row: headers -->
<tr>
<th>Course Title</th>
<th>Course Name</th>
</tr>
<!-- second row -->
<tr>
<td>CSCI 3080</td>
<td>Discrete Structure</td>
</tr>
<!-- third row -->
<tr>
<td>CSCI 4410</td>
<td>Web Technologies</td>
</tr>
</table>
• A
border
can be added using the border attribute.
<table border="1px">
<tr>
<th>Course Title</th>
<th>Course Name</th>
</tr>
<tr>
<td>CSCI 3080</td>
<td>Discrete Structure</td>
</tr>
<tr>
<td>CSCI 4410</td>
<td>Web Technologies</td>
</tr>
</table>
• Table Cells can Span Many Columns using the
colspan
attribute.
<table border="1px">
<tr>
<th colspan="2">Course Title and Name</th>
</tr>
<tr>
<td>CSCI 3080</td>
<td>Discrete Structure</td>
</tr>
<tr>
<td>CSCI 4410</td>
<td>Web Technologies</td>
</tr>
</table>
• Table Cells can Span Many Rows using the
rowspan
attribute.
<table border="1px">
<tr>
<th>Course Title</th>
<th>Course Name</th>
</tr>
<tr>
<td rowspan="2">CSCI 3080</td>
<td>Discrete Structure</td>
</tr>
<tr>
<td>Web Technologies</td>
</tr>
</table>
HTML Formatting
HTML Bold
- • The HTML <b> element defines bold text, without any extra importance.
HTML Italic
- • The HTML <i> element defines italic text, without any extra importance.
HTML Marked
- • The HTML <mark> element defines marked or highlighted text.
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
<p><i>This text is italic.</i></p>
<p><mark>This text is marked.</mark></p>
This text is normal.
This text is bold.
This text is italic.
This text is marked.
HTML Editors
- • Notepad++
- • Atom
- • vi/vim/emac
- • sublime
- • Online Editor: replit
HTML tip: use lowercase tags
- • HTML tags are not case sensitive, <P> means the same as
<p>.
- • If you want to view the HTML source, right-click in the page and select "View Page Source" (in
Chrome) or "View Source" (in IE), or similar in another browser. This will open a window containing the HTML
code of the page.
Indentation is your friend
Indentation really helps make your code more readable!
Process for developing a website
- ☆ Plan and design the website
- ☆ Create the web pages using an editor
- ☆ Test the web pages
- ☆ Publish the web pages by uploading the pages to the web server.
Reference