Scribd
Upload
18 views

Lecture 8 - HTML.PPTX

Uploaded by

mansouranthony77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views

Lecture 8 - HTML.PPTX

Uploaded by

mansouranthony77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

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.

You might also like