Scribd
Upload
75 views

Chapter 3 Lec1

HTML is the standard markup language used to define the structure of web pages. HTML uses tags to define elements like headings, paragraphs, links, and images. The <head> section contains meta data like the title. The <body> section contains the visible page content with tags like <h1> for headings and <p> for paragraphs. Images are defined with the <img> tag along with attributes for the image source, alt text, and size. Links are defined with the <a> tag and the href attribute pointing to the URL. Styles can be applied with the style attribute or internal CSS.

Uploaded by

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

Chapter 3 Lec1

HTML is the standard markup language used to define the structure of web pages. HTML uses tags to define elements like headings, paragraphs, links, and images. The <head> section contains meta data like the title. The <body> section contains the visible page content with tags like <h1> for headings and <p> for paragraphs. Images are defined with the <img> tag along with attributes for the image source, alt text, and size. Links are defined with the <a> tag and the href attribute pointing to the URL. Styles can be applied with the style attribute or internal CSS.

Uploaded by

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

Chapter three L-1

Introduction to HTML

A markup language is a computer language that uses tags to define elements within
a document. It is human-readable, meaning markup files contain standard words,
rather than typical programming syntax. While several markup languages exist, the
two most popular are HTML and XML.

HTML is the standard markup language for creating Web pages.

 HTML stands for Hyper Text Markup Language


 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements 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
 HTML defines the way that images, multimedia, and text are displayed
in web browsers.

HTML is a markup language used for creating web pages. The contents of each
webpage are defined by HTML tags. Basic page tags, such as <head>, <body>,
and <div> define sections of the page, while tags such as <table>, <form>,
<image>, and <a> define elements within the page. Most elements require a
beginning and end tag, with the content placed between the tags. For example, a
link to the TechTerms.com home page may use the following HTML code

HTML Document Structure


 HTML for any time at all you know that every bit of HTML needs to be
wrapped in html tags.
 An opening <html> tag should appear first and a closing </html> tag should
appear at the bottom of the document. Every other bit of HTML should
appear between those two tags.
 The head element is the first element to appear after the opening html tag. In
the document head we place things like the page title and meta data
 On most web pages the head element is a very busy place.
The head element and what these tags are used for.
 All of the content that is visible on a web page is nested between opening
and closing body tags. The body is the primary container of the content that
makes up a web page.
<!DOCTYPE html>
<html>
<head>
<title> Rift Valley university </title>
</head>
<body>
<h1> Rift Valley university Adama campus </h1>
<p> Adama Campus </p>
<p> computer science department </p>
<p> Electrical Engineering </p>
</body>
</html>

 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 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

The start tag is also called the opening tag, and the end tag the closing tag.
HTML version

Since the early days of the web, there have been many versions of HTML

Version Year
HTML 1991
HTML.2.0 1995
HTML3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

How to save HTML files?

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "filename.htm or filename.html" and set the encoding to UTF-


8 (which is the preferred encoding for HTML files).

HTML Headings

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

<h1> defines the most important heading. <h6> defines the least important heading

<h1> Rift Valley University </h1>

<h2> Adama Campus </h2>

<h3> Computer science </h3>

HTML paragraphs

HTML paragraphs are defined with the <p> tag:

Example
<p> HTML stands for Hyper Text Markup Language </p>

<p> well come to Rift Valley University </p>

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following

 syntax:

<tagname style="property:value;">

Example

HTML Background Color

The background-color property defines the background color for an HTML


element.

This example sets the background color for a page to “powderblue”

<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

HTML Text Color

The color property defines the text color for an HTML element:

<h1 style="color:blue;">according the Ethiopian Rule</h1>


<p style="color:red;">we will attend web development class.</p>

HTML Fonts

The font-family property defines the font to be used for an HTML element:

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
HTML Text Size

The font-size property defines the text size for an HTML element:

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML


element:

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

Chapter Summary

 Use the style attribute for styling HTML elements


 Use background-color for background color
 Use color for text colors
 Use font-family for text fonts
 Use font-size for text sizes
 Use text-align for text alignment

HTML Formatting Elements

HTML also defines special elements for defining text with a special meaning.

HTML uses elements like <b> and <i> for formatting output,
like bold or italic text.

Formatting elements were designed to display special types of text:

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML Comments

Comment tags are used to insert comments in the HTML source code.

HTML Comment Tags

You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

Comments are not displayed by the browser, but they can help document your
HTML source code.

HTML Links
 Links are found in nearly all web pages. Links allow users to click their way
from page to page.

 You can click on a link and jump to another document.

 When you move the mouse over a link, the mouse arrow will turn into a
little hand.

 In HTML, links are defined with the <a> tag:

<a href="url">link text</a>

Example
<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>

HTML Images Syntax

In HTML, images are defined with the <img> tag.


The <img> tag is empty, it contains attributes only, and does not have a closing
tag.

The src attribute specifies the URL (web address) of the image:

<img src="url" alt="some_text" style="width:width;height:height;">

The alt Attribute

The alt attribute provides an alternate text for an image, If a browser cannot find an
image, it will display the value of the alt attribute.

Example:

<img src="wrongname.gif" alt="HTML5Icon" style="width:128px;height:128px;"
>

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

The values are specified in pixels (use px after the value):

Alternatively, you can use the width and height attributes. Here, the values are


specified in pixels by default:

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

Images in Another Folder

the browser expects to find the image in the same folder as the web page.

However, it is common to store images in a sub-folder. You must then include the
folder name in the src attribute:

Example :

<img src="/images/html5.gif" alt="HTML5Icon" style="width:128px;height:128p
x;">
Images on another Server

Some web sites store their images on image servers.

Actually, you can access images from any web address in the world:

<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Sch
ools.com">

Chapter Summary

 Use the HTML <img> element to define an image


 Use the HTML src attribute to define the URL of the image
 Use the HTML alt attribute to define an alternate text for an image, if it
cannot be displayed
 Use the HTML width and height attributes to define the size of the image

You might also like