HTML
THE BASICS
SPRING
Dr. Nisrine El Turky
2022
World Wide Web (WWW)
The World Wide Web
History
Created in 1989 in the European Laboratory for
Particle Physics (Geneva Switzerland)
Purpose
Provide
an easy way to access cross-referenced
documents that exist on the internet
HTML
Hypertext Markup Language (HTML)
Standard markup language for creating web
pages and web applications
With Cascading Style Sheets (CSS)
and JavaScript it forms the cornerstone
technologies for the WWW
HTML
HTML elements are the building blocks of
HTML pages.
HTML elements are delineated by tags,
written using angle brackets
Opening tag < >
Closing tag < / >
Browsers do not display the HTML tags,
but use them to interpret the content of
the page.
HTML, CSS and JavaScript
Editors
Here is a list of HTML, CSS and JavaScript editors you can choose
from:
• VS Code (free, recommended) - https://code.visualstudio.com/
• Atom (Free) - https://atom.io/
• JetBrains WebStorm (Commercial) -
https://www.jetbrains.com/webstorm/
• Sublime Text (Commercial) - https://www.sublimetext.com/
• Notepad++ (Windows only) -
https://notepad-plus-plus.org/download/v7.html
There are plenty of online editor:
https://www.tutorialspoint.com/online_html_editor.php
Explore a web page
Right click on a web page
Select View Source
Look for the parts of the page – The tags
Head
Body
Title
Pairs of tags
Opening tags < >
Closing tags < / >
UPPER CASE vs. lower case?
Parts of the Page
HTML tags indicate this is an HTML
document:
<html> < /html>
Each page has 2 parts:
Head – holds information like the page
title
<head> </head>
Body – holds the visible text and images
<body> </body>
A Basic Web Page
<html>
<head>
<title> MY PAGE -
Home</title>
</head>
<body>
Hello, world!
</body>
</html>
Test Page
Go to your directory on the C: drive.
“Save as” your NotePad file as index.html
To view it, open a browser and enter
file://c:/yourDirectory/index.html
Now, view the source using the right
mouse button.
Note: file not http because we are reading a local
page.
Headings
Headings:
<h#> My Heading </h#>
where # is a number between 1 and 6
with 1 being the largest.
Example: <h1> My Web Page </h1>
<h3> Activities </h3>
<h5> Computer Workshop
</h5>
Images
Include the source file and path (location)
as well as alternate text for those who
can not load the picture or need to use a
text reader
<img src=“picture.gif" width=196
height=78 alt=“This is what you should
see" border="0">
Other Common Tags
Paragraphs <p> </p>
Forced Break <br> </br>
Emphasis <em> </em>
Bold <b> </b>
Italics <i> </i>
Alignment <p align=left/right/center>
</p>
Default is left
Unnumbered Lists <ul>
HTML Output
<ul>My list My list
<li> list item 1 list item 1
<li> list item 2
list item 2
<li> list item 3
list item 3
</ul>
Note: list items can be multiple
lines or paragraphs
Numbered or Ordered Lists
<ol>
HTML Output
<ol>My ordered list My ordered list
<li> list item 1
1. list item 1
<li> list item 2
2. list item 2
<li> list item 3
</ol> 3. list item 3
Note: list items can be multiple
lines or paragraphs
Horizontal Rules/Lines
<hr> </hr>
Example with parameters:
<hr> size=4 width=“75%” </hr>
Produces a line size 4 that goes across
75% of the page.
Links to Other Pages
Use the anchor tag <a … > </a>
Link to another page
<a href=“page2.htm”>Page 2 </a>
where page2.htm is located in the same directory
Link to a web page
<a href=“www.yahoo.com/mypage/page2.htm”>Page 2 </a>
Note: some OS are case sensitive so be consistent in names.
Links to Specific Sections
Link to another section of a page
1. Create a named anchor in the section
<h2><a name=“S2”>Section 2
</a></h2>
2. Create the link in the same document
or another document.
<a href=“MyWebPage.htm#P2">Section
2</a>
Basic Settings
Background:
bgcolor=“#ffffff”
Font and alternates:
{font-family: Arial, Helvetica, sans-
serif }
Font color:
text="#333333"
Basic Settings
Links:
Link: link="#333333"
Visited link: vlink="#333333"
Active link: alink="#333333"
Margins:
leftmargin=0 topmargin=0
marginwidth=0 marginheight=0
Example 1
<html>
<head>
<title> MY PAGE - Home</title>
</head>
<body bgcolor=“#efffff” text=" #FF0000 " link="#333333"
vlink="#333333" alink="#333333">
<style>
*{
font-family: sans-serif;
}
<p align=center> Hello, world! </p>
</style>
Hello, world!
</body>
</html>
Example 2
Check the Microsoft Word File.
