Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
18 views

Lecture 8 - HTML.PPTX

Uploaded by

mansouranthony77
Copyright
© © All Rights Reserved
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
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