Scribd
Upload
9 views

HTML Basics

The background of HTML and it's applications

Uploaded by

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

HTML Basics

The background of HTML and it's applications

Uploaded by

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

HTML

• HTML is the standard markup language for creating Web pages.


• HTML stands for Hyper Text Markup Language
• HTML describes the content and 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 EDITORS

• Web pages can be created and modified by using professional HTML editors
like Adobe Dreamweaver, Microsoft Expression Web, Coffee Cup HTML
Editor, Net beans, Eclipse,Visual Studio, PyCharm etc.

• However, for learning HTML we recommend a simple text editor like


NOTEPAD, NOTEPAD++ (Windows) or SUBLIME TEXT
STRUCTURE OF AN HTML DOCUMENT

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>

<body>
Place your content here

</body>

</html>
• Always declare the document type as the first line in your
document:
• <!DOCTYPE html>
• . HTML Comment Tags
<!-- Write your comments here -->
• comments you can place NOTIFICATIONS and REMINDERS in
your HTML:
HEADINGS

• Headings are defined with the <h1> to <h6> elements


• <h1> This is my first heading </h1> --biggest
• <h2> This is my second heading </h2>
• <h3> This is my third heading </h3>
• <h4> This is my fourth heading </h4>
• <h5> This is my fifth heading </h5>
• <h6> This is my sixth heading </h6> -- smallest
PARAGRAPHS

• The HTML <p> element defines a paragraph:

• <p>This is a paragraph.</p>
<p>This is another paragraph.</p>
LINE BREAKS

• The HTML <br> element defines a line break.


• Use <br> if you want a line break (a new line) without starting a
new paragraph
• The <br> tag is an EMPTY TAG, which means that it has NO
END TAG.
HTML HORIZONTAL RULER

• A horizontal ruler, denoted using the <hr> tag displays a line to separate
content.
• Also an empty tag
TEXT FORMATTING

• <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
LINKS

• Links allow users to click their way from page to page.


• In HTML, links are defined with the <a> tag:
• <a href="url">link text</a>
• <a href="http://www.msu.ac.zw">Midlands State University</a>

• The href attribute specifies the destination address of the link


• The link text is the visible part

• <a href="mailto:[email protected]>Contact Us</a>


▪ Internal Links : Links can also be created inside large documents to simplify navigation..
1. Select some text at a place in the document that you would like to create a link to, then
add an anchor to link to like this:
<A NAME=“bookmark_name”></A>
The Name attribute of an anchor element specifies a location in the document that we
link to shortly. All NAME attributes in a document must be unique.
2. Next select the text that you would like to create as a link to the location created
above.
<A HREF=“#bookmark_name”>Go To Book Mark</A>
IMAGES

• images are defined with the <img> tag.


• <img src= “url>
• 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
• height/width: these attributes are used to assign height and width of the image.You can
set the height and width of you image by either percentage value or by pixel value

•<img src="africa.jpg" height="150" width="150">


• <img src="html5.gif" alt="HTML5" width:128px;height:128px>
• To add an image as a background of your web pages you can use the background
attribute:
• background="image source">
• E.g. <body background=“africa.jpg">
TABLES

• An HTML table is defined with the <table> tag.


• Each table row is defined with the <tr> tag. A table header is
defined with the <th> tag. By default, table headings are bold and
centered. A table data/cell is defined with the <td> tag.
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
LISTS

• Unodered list use the <ul> tag


• List elements are defined using the <li>
• <ul>
• <li>Harare</li>
• <li>Gaborone</li>
• <li>Maputo</li>

• </ul>
THE TYPE PROPERTY IS USED TO DEFINE THE STYLE
OF THE LIST ITEM MARKER
Value Description
disc Sets the list item marker to a bullet
(default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
• <ul style="list-style-type:square;">
<li>New York</li>
<li>Havana</li>
<li>Tokyo</li>
</ul
• An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list
items will be marked with numbers by default.
• <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol
THE TYPE ATTRIBUTE OF THE <OL> TAG, DEFINES THE
TYPE OF THE LIST ITEM MARKER:

Type Description
type="1" The list items will be numbered with numbers
(default)
type="A" The list items will be numbered with
uppercase letters
type="a" The list items will be numbered with
lowercase letters
type="I" The list items will be numbered with
uppercase roman numbers
type="i" The list items will be numbered with
lowercase roman numbers
MARQUEE TAG

• The HTML <marquee> tag is used for scrolling a piece of text or image displayed
either horizontally across or vertically down your web site page depending on the
settings.

<body>
<marquee>Web and mobile applications</marquee>
<marquee direction = "up">HTML</marquee>
</body>
CHARACTER ENTITIES

• Reserved characters in HTML must be replaced with character entities.


It is not possible to use the less than (<) or greater than (>) signs in your text, because the
browser will mix them with tags.
• To display reserved characters, we must use character entities in the HTML source code.

• & entity_name; OR &#entity_number;


• E.g.
• &quot = “
• &apos = ‘
• &divide = division sign
COLORS

• HTML colors are specified using either their predefined color names, RGB or HEX
values.
• With the RGB notation, each 2-digit section of the code represents the amount, in
sequence, of red, green or blue that forms the color.
• For example, a RGB value with 00 as the first two digits has no red in the color.
BASIC COLORS
PERSONAL WEB PAGE ASSIGNMENT

• Design a web page profile of your self using the Html tags learnt
in lectures.
• Marks will be warded on the content, variety of tags used, design
and creativity
• Time 16:00 hours.
• Late Submissions wont be accepted
• Strictly individual assignment

You might also like