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

(Lesson 1) HTML Fundamentals

Uploaded by

aastproject10
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

(Lesson 1) HTML Fundamentals

Uploaded by

aastproject10
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 43

Fundamentals of HTML

Dr. Ali Allam Web Programming (BIS317E)


What is HTML?

❑ HTML is the standard language for creating Web pages.


❑ HTML stands for “Hyper Text Markup Language”.
❑ HTML elements are the building blocks of HTML pages, which are
represented by tags.
❑ HTML tags label pieces of content such as "heading", "paragraph",
"table", and so on.
❑ Browsers do not display the HTML tags, but use them to render the
content of the page.
What is HTML?

Always Remember:
❑ HTML is just a text structuring/formatting language for displaying
webpages. It’s NOT a programming language.
❑ HTML is NOT case-sensitive. <body> is the same as <BODY> or
<Body>.
HTML Structure

The <head> provides


descriptive info (metadata)
for the document, such as
the title, character set, etc.

Only the content inside the


<body> section (the white
area) is displayed in a
browser.
A Simple HTML Document

HTML code-view
<!DOCTYPE html> HTML browser-view
<html>
<head>
<title>My First Webpage</title>
</head>

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

</html>
Example Explained

❑ The <!DOCTYPE html> declaration defines this document to be HTML5


❑ The <html> element is the root element of an HTML page
❑ The <head> element contains meta information about the document
❑ The <title> element specifies a title for the document
❑ The <body> element contains the visible page content
❑ The <h1> element defines a large heading
❑ The <p> element defines a paragraph
HTML Documents

 Don't worry if this example uses tags you have not learned yet. You
will learn about them later.
 All HTML documents may usually start with a document type
declaration: <!DOCTYPE html>.
 The HTML document itself begins with <html> and ends with
</html>.
 The visible part of the HTML document is between <body> and
</body>.
HTML Tags

HTML tags are element names surrounded by angle brackets:


<tagname> content goes here </tagname>
❑ HTML tags normally come in pairs like <p> and </p>
❑ The first tag in a pair is the start tag, the second tag is the end tag
❑ The end tag is written like the start tag, but with a forward slash inserted
before the tag name
❑ Tip: The start tag is also called the opening tag, and the end tag the closing
tag.
Web Browsers
❑ The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML
documents and display them.
❑ The browser does not display the HTML tags, but uses them to determine how to
display the document:
HTML Editors

 Web pages can be created and modified by using professional


HTML editors, such as Dreamweaver, Aptana, and Brackets, etc.
 However, for learning HTML we recommend a simple text editor like
Notepad (PC) or TextEdit (Mac).
 We believe using a simple text editor is a good way to learn HTML.
 Follow the following steps to create your first web page with
Notepad or TextEdit.
Create, View and Edit HTML Webpages

 Step 1: Open your HTML editor (e.g. Notepad program).


 Step 2: Write your HTML code.

 Step 3: Save the file as an HTML file using the extension (.htm) or
(.html)
 Step 4: Double-click on the HTML file to view the HTML page in your

browser.
IF you want to edit/modify the file you’ve created:
 Step 5: Right-click on the HTML file, and open it with your HTML
editor (go through steps 1 to 4 again).
Basic HTML Tags

1. Headings
2. Paragraphs
3. Text formatting elements
4. Empty tags
5. Lists (ordered and unordered)
6. Images
7. Hyperlinks (Anchors)
8. Tables
9. Forms
1. Headings
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
HTML Headings

 HTML headings are defined with the <h1> to <h6> tags.


 <h1> defines the most important heading. <h6> defines the least
important heading: <!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML Headings

Notes about the heading tags:


 Browsers automatically add some white space (a margin) before and

after a heading.
 Use HTML headings for headings only. Don't use headings to make

text larger or bold. You will learn later how to change the font size.
Don’t worry about this now ☺
 The HTML <head> element has nothing to do with HTML headings.

The <head> element is a container for metadata. Metadata typically


define the document title, character set, styles, links, scripts, etc.
2. Paragraphs
<p>
2. HTML Paragraphs

 HTML paragraphs are defined with the <p> tag:

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>
HTML Paragraphs

 You cannot be sure how HTML will be displayed.


 Large or small screens, and resized windows will create different
results.
 With HTML, you cannot change the output by adding extra spaces or
extra lines in your HTML code.
 The browser will remove any extra spaces and extra lines when the
page is displayed:
HTML Paragraphs: Example 1

<!DOCTYPE html>
<html>
<body>

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

</body>
</html>
HTML Paragraphs: Example 2

<!DOCTYPE html>
<html>
<body>

<p>
This paragraph contains
a lot of spaces in
the source code ,
but the browser ignores
it.
</p>

</body>
</html>
HTML Paragraphs: Example 2
(continued)
<!DOCTYPE html> To add more spaces within a text, you
<html>
<body> should use the special character &nbsp;

<p>
This is how &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; to make extra spaces
</p>

</body>
</html>
HTML Paragraphs: Example 3

<!DOCTYPE html>
<html>
<body>

<p>
The number of lines in a paragraph
depends on the size of the browser
window. If you resize the browser
window, the number of lines in this
paragraph will change.
</p>

</body>
</html>
3. Text Formatting Elements
<b>, <i>, <u>, <strike>, <sup>, <sub>,
<mark>
Text Formatting

 <b> defines bold text


 <i> defines italics text
 <u> defines underlined text
 <strike> defines strike-through text
 <mark> defines marked/highlighted text
 <sup> defines superscripted text
 <sub> defines subscripted text
Text Formatting
<!DOCTYPE html>
<html>
<body>
<p>
<b>Name: </b>Mohamed Mostafa<br>
<b>Title: </b><i>Professor</i><br>
<b>Department: </b><u>Information Systems</u><br>
<b>Adress: </b> Apt. 16, 6<sup>th</sup> District, Nasr City<br>
<b>Telephone<sub>(1)</sub>: </b> 987654321<br>
<b>Telephone<sub>(2)</sub>: </b> <strike>12345</strike><br>
<mark><b>Website: </b>N/A</mark>
</p>
</body>
</html>
4. Empty Elements
<br> and <hr>
Empty Elements

 HTML elements with no content are called empty elements. Empty


elements do NOT have an end tag. E.g. <br> and <hr>.
 <br> makes a line break (new line) without starting a new paragraph
<!DOCTYPE html>
<html>
<body>
<p>
Dear Developers <br>
Have a nice day!
<p>
</body>
</html>
Empty Elements

 <hr> displays a horizontal ruler.


<!DOCTYPE html>
<html>
<body>
<p> This is the first section in the webpage.<br>
Different sections can be separated by a
horizontal ruler. </p>
<hr>
<p> This is another paragraph preceded by a
horizontal ruler.<br>
The horizontal ruler makes different sections look
well-separated. </p>
</body>
</html>
5. Lists (unordered and ordered)
<ul> and <ol>
HTML Lists

 There are two types of lists in HTML: unordered and ordered.


 Example of unordered and ordered lists:
An Unordered List: An Ordered List:
• First Item 1. First Item
• Second Item 2. Second Item
• Third Item 3. Third Item
• Fourth Item 4. Fourth Item

 Items in an unordered list start with a list mark such as a bullet.


 Items in an ordered list are numbered sequentially.
HTML Lists: unordered list

 An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag. The list items will be marked with bullets by default.
<!DOCTYPE html>
<html>
<body>
<h3>An unordered HTML list</h3>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
HTML Lists: unordered list

 You have the choice of three bullet types: disc (default), circle, square.
 These are controlled by the “TYPE” attribute for the <UL> element.
<!DOCTYPE html>
<html>
<body>
<h3>An unordered HTML list</h3>
<ul type= "circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
HTML Lists: ordered list

 An ordered list starts with the <ol> tag. Each list item starts with the
<li> tag. The items will be marked with numbers by default.
<!DOCTYPE html>
<html>
<body>
<h3>An ordered HTML list</h3>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
HTML Lists: ordered list

 There are five numbering styles: 1 (default), a, A, i, and I.


 The numbering style is specified by the TYPE attribute. Example:
<!DOCTYPE html>
<html>
<body>
<h3>An ordered HTML list</h3>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
HTML Lists: nested lists
<html>  Lists can be nested (lists inside lists),
<body>
<h2>A Nested List</h2> as the shown example:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
6. Images
<img>
HTML Images

 HTML images are defined with the <img> tag.


 The <img> tag is an empty element, it contains attributes only, and
does not have a closing tag.
<!DOCTYPE html>
<html>
<body>

<img src="aast.png" alt= "AASTMT" width="197"


height="140">

</body>
</html>
HTML Images

The src, alt, width, and height are provided as attributes for the image:
1. The src attribute specifies the address of the image.
 Unless specified, the browser expects to find the image in the same folder as
the web page:
Ex: <img src=“image1.png”>
 If the webpage and image are stored in different directories, you must then
include the relative path of the image:
Ex: <img src=“multimedia/images/image2.gif”>
 You can also access images from any web address in the world:
Ex: <img src=“http://www.abc.com/images/image3.jpg”>
HTML Images

2. The alt attribute provides an alternate text for an image. If a


browser cannot load an image (e.g. incorrect URL or slow
connection), it will display the value of specified by the alt attribute.
3. The width and height attributes always define the width and height
of the image in pixels. If width and height are not specified, the
page might flicker while the image loads.

 Remember: the attributes are used to provide additional information


for HTML tags.
7. Links (Anchors)
<a>
HTML Hyperlinks (Anchors)

 HTML links are defined with the <a> tag.


 The link's destination is specified in the href attribute.
<!DOCTYPE html>
<html>
<body>

<a href="http://www.aliallam.net">This is a link</a>

</body>
</html>
HTML Hyperlinks (Anchors)

 The target attribute specifies where to open the linked document.


 The target attribute can have one of the following values:
 _self : Opens the linked document in the same window/tab as it was clicked
(this is default).
 _blank : Opens the linked document in a new window or tab

 _top : Opens the linked document in the full body of the window

 _parent : Opens the linked document in the parent frame

 framename : Opens the linked document in a named frame

Ex: <a href="http://www.aliallam.net" target="_blank">Visit My Homepage</a>


HTML Hyperlinks (Anchors)

 It is common to use an image as a hyperlink, instead of text:


<!DOCTYPE html>
<html>
<body>

<a href="http://www.aliallam.net" target="_blank">


<img src=“myLogo.jpg" alt="Homepage" width="50"
height="50">
</a>

</body>
</html>

You might also like