I hope you read my first blog called Introduction of Web and Web development.
What is HTML?
HTML stands for Hypertext Markup Language. It is the markup
language for creating web pages and web application. HTML elements are the
building blocks of HTML pages and there are represented by tags.
HTML Documents
- HTML documents are text documents
Use
simply ASCII text files
HTML
file extensions: .html or .htm
- You can create HTML documents using
Notepad Notepad++ in windows TextEdit in MAC OS
- You can also use HTML editors
Dreamviwer Microsoft FrontPage WebStorm
Steps to create the web page
Step 1: Open
Notepad (PC)
Windows
8 or later: Open the start screen and type Notepad
Windows
7 or earlier: Open Start > Programs > Accessories >
Notepad
Notepad
Open
TextEdit (Mac)
Open
Finder > Applicaions > TextEdit
Step 2: Write some HTML
Step 3: Save the HTML Page
Select File > Save as
Name the file
“Firstpage.html”
Select save type as "All Files (",")"
Step 4: View the HTML
page in a Web browser
Open the saved HTML file in a web
browser
HTML documents structure
The HTML document
is divided into two parts:
HEAD :
contains information about the document:
Title
of the page
Meta
tags are used to describe the content
JavaScript
and Style sheets links
BODY :
contains the actual content of the document
This
is the part that will be displayed in the browser window.
HTML Basic Tags
The basic structure
for all HTML document is simple and should include the following minimum
elements or tags.
<html>
- the main container for HTML pages
<head>
- the container for page header information
<title>
- the title of the page
<body>
- the main body of the page
<h1>
- the large heading of the page
<p>
- a paragraph can be included within these tags,
Only content inside
the <body> is displayed in a web browser.
Tags
Some tags have both
start tag and the end tag:
Eg: <html></html>
<head></head>
<body></body>
<p></p>
Exercise code:
<!DOCTYPE html>
<html>
<head>
<title>First Self</title>
</head>
<body>
<h1>My Self</h1>
<p>Enter your Name</p>
<p>Enter your Birthday</p>
</body>
</html>
But some tags don't need a closing tag
Eg:
<br/> - Break the content of web page by horizontal space.
<hr/> - create a Horizontal rule in
the page
<img/> - insert image in the page
<meta/> - insert meta data to a web page
<DOCTYPE/> - Define document type
Exercise code:
<!DOCTYPE html>
<html>
<head>
<title>First Self</title>
</head>
<body>
<h1>My Self</h1>
<hr />
<img src="Myimage.jpg"/>
<br />
<p>Enter your Name</p>
<p>Enter your Birthday</p>
</body>
</html>
HTML Attributes
Attributes
provide additional information about an element.
There
are always specified in the start tag.
Attributes
come in name/value pairs like: name=”value”
Eg:
<body name=”container” bgcolor=”yellow”>---</body>
Exercise code:
<!DOCTYPE html>
<html>
<head>
<title>First Self</title>
</head>
<body name="container" bgcolor="Color">
<h1>My Self</h1>
<p>Enter your Name</p>
<p>Enter your Birthday</p>
</body>
</html>
<img/> tag
<img/> tag defines an image in an HTML page.
Image attributes
Image attributes
- src
Specifies of the URL or file path of the image.
<img src="URL/File Path"/>
You must include the folder name in the src attribute.
<img src="URL/File Path"/>
You must include the folder name in the src attribute.
File path:
There are 4 types of file path you must know.
There are 4 types of file path you must know.
1. Image is located in the same folder as the current page.
<img src="flower.jpeg"/>
2. Image is located in the Images folder in the current
folder.
folder.
<img src="images/flower.jpeg"/>
3. Image is located in the Images folder at the root of the
current web.
current web.
4. Image is located in the folder one level up from the
current folder.
current folder.
URL or Images on another server
Some web site store images on the image server.
Some web site store images on the image server.
Eg: <img src="https://www.google.lk/url?
sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwjchrfxlo7iAhVBPI8KHeW8CnsQjRx6BAgBEAU&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fflower%2F&psig=AOvVaw28RSyiuiFER2xul35-5LPQ&ust=1557470318370672"/>
- alt
Provides an alternate text for an image, if the user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if
the user uses a screen reader.)
<img src="URL/File Path" alt="image"/>
- width and height
Specify the width and height of the image.
<img src="URL/File Path" alt="image" width="50%" height="50%"/>
- align
Specify the alignment of the image.
<img src="URL/File Path" alt="image" width="50%" height="50%" align="top"/>
Information which the browser will ignore:
Tabs,
Multiple spaces will appear as a single space, new line
Comments <! -- -->
Browser
will not display text in between comment tags.
<!
-- This is a comment -->
Comments can be helpful when your code is read by others and
when debugging html.
when debugging html.
Exercise code:
<!DOCTYPE html>
<html>
<head>
<title>First Self</title>
</head>
<body name="container" bgcolor="Color"><! -- Background color -->
<h1>My Self</h1>
<hr/>
<img src="path of you image" alt="My self" width="20%" height="20%">
<br/>
<hr/>
<img src="path of you image" alt="My self" width="20%" height="20%">
<br/>
<p>Enter your Name</p>
<p>Enter your Birthday</p>
<h2>Education</h2>
<p> Studied at Your school name</p>
<h2>Education</h2>
<p> Studied at Your school name</p>
</body>
</html>
I hope you got a basic knowledge of HTML and now you can
create simple web page.
See you soon with the HTML text formatting and font tags.
