Scribd
Upload
61 views

Basic HTML

HTML is a markup language used to define the structure and layout of web pages. It uses tags to mark elements like headings, paragraphs, and other items. Web browsers read HTML documents and display the pages according to the tags. HTML can be written and edited using simple text editors or specialized HTML editors. Common HTML tags are used to specify headings, paragraphs, comments, horizontal rules, line breaks, and other formatting of text.

Uploaded by

Aini Hafizah Mohd Saod
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
61 views

Basic HTML

HTML is a markup language used to define the structure and layout of web pages. It uses tags to mark elements like headings, paragraphs, and other items. Web browsers read HTML documents and display the pages according to the tags. HTML can be written and edited using simple text editors or specialized HTML editors. Common HTML tags are used to specify headings, paragraphs, comments, horizontal rules, line breaks, and other formatting of text.

Uploaded by

Aini Hafizah Mohd Saod
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

Website Development

Introduction to HTML
• HTML stands for Hyper Text Markup Language.
• It is a markup language for describing web
documents (web pages).
• A markup language is a set of markup tags.
• HTML documents are described by HTML tags.
• Each HTML tag describes different document
content.

1
Website Development

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.

2
Website Development

Web Browsers

3
Website Development

HTML Tags
• HTML tags are keywords (tag names) surrounded by
angle brackets: <tagname> content </tagname>
• HTML tags normally come in pairs like <p> and </p>
which is start tag and end tag.
• The start tag is often called the opening tag and the
end tag is often called the closing tag.

4
Website Development

HTML Editors
• HTML can be edited by using professional HTML
editors like:
 Adobe Dreamweaver
 Microsoft Expression Web
 CoffeeCup HTML Editor

5
Website Development

HTML Editors
• Using a simple text editor is a good way to learn
HTML editors such as:
 Notepad (Windows)
 TextEdit (Mac)
• Besides, online editor is also an alternative for
editing HTML code before implementing it:
 http://www.htmlinstant.com/
 http://www.w3schools.com/html/tryit.asp?filena
me=tryhtml_basic_link

6
Website Development

HTML Editors
Step 1: Open Notepad Step 2: Write Some HTML

 To open Notepad in Windows 7  Write or copy some HTML into


or earlier: Notepad.
 Click Start (bottom left on your
screen). Click All Programs. Click
Accessories. Click Notepad.
 To open Notepad in Windows 8
or later:
 Open the Start Screen (the
window symbol at the bottom left
on your screen). Type Notepad.

7
Website Development

HTML Editors
Step 3: Save the HTML Page Step 4: View HTML Page in Your
Browser
 Save the file on your computer.
 Select File > Save as in the  Open the saved HTML file in your
Notepad menu. favorite browser.
 Name the file "index.html" or  The result will look much like this:
"index.htm".
 UTF-8 is the preferred encoding
for HTML files.
 ANSI encoding covers US and
Western European characters
only.

8
Website Development

HTML Editors

9
Website Development

HTML Document
Example of HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

10
Website Development

HTML Document
HTML Description
<tag> Start tag
</tag> End tag
<html> Elements of HTML document
<head> Information about the document
<title> Title for the document
<body> Visible page content
<h1> Heading
<p> Paragraph

11
Website Development

HTML Document
Below is a visualization of an HTML page structure:

12
Website Development

HTML Display
• 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 extra spaces and extra lines
when the page is displayed.
• Any number of spaces, and any number of new lines,
count as only one space.

13
Website Development

HTML Display
<!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

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

HTML Heading
• Heading is defined with the <h1> to <h6> tags.
• <h1> defines the most important heading.
• <h6> defines the least important heading.

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

15
Website Development

HTML Heading
• Use HTML heading for heading only.
• Do not use heading to make text BIG or BOLD.
• Search engines use heading to index the structure
and content of the web pages.
• It is important to use heading to show the document
structure – h1 heading should be main headings,
followed by h2 heading, then the less important h3,
and so on.

16
Website Development

HTML Paragraph
• The HTML <p> element defines a paragraph.
• Browsers automatically add an empty line before and
after a paragraph.
<p>This is a paragraph</p>
<p>This is another paragraph</p>

17
Website Development

HTML Comment Tag


• The text between <!-- and --> describes an HTML
comment which are not displayed by the browser.
• With comments you can place notification and
reminder in your HTML.
<!-- This is a comment -->

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

<!-- Remember to add more information here -->

18
Website Development

HTML Horizontal Rule


• The <hr> tag creates a horizontal line in an HTML
page.
• The hr element can be used to separate content.

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

19
Website Development

HTML Line Break


• The HTML <br> element defines a line break.
• Use <br> if you want a line break (a new line)
without starting a new paragraph:
<p>This is<br>a para<br>graph with line
breaks</p>

20
Website Development

HTML Styling
• Every HTML element has a default style (background
color is white and text color is black).
• Changing the default style of an HTML element, can
be done with the style attribute.
<h2 style="color:red">I am Red</h2>
<h2 style="color:blue">You are Blue</h2>

21
Website Development

HTML Styling
• This example changes the default background color
from white to lightgrey:
<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

22
Website Development

HTML Styling
• The color property defines the text color to be used
for an HTML element.
<h1 style="color:blue">This is a
heading</h1>
<p style="color:red">This is a
paragraph.</p>

23
Website Development

HTML Font
• 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>

24
Website Development

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>This is a paragraph.</p>

25
Website Development

HTML Formatting Elements


• HTML also defines special elements, for formatting
the output.
• HTML uses elements like <b> and <i> for bold or
italic text.
• Formatting elements were designed to display
special types of text such as subsripted or
superscripted text.

26
Website Development

HTML Formatting Elements


• The HTML <b> element defines bold text, without any extra
importance.
• The HTML <i> element defines italic text, without any extra
importance.
• The HTML <small> element defines small text.
• The HTML <mark> element defines marked or highlighted text.
• The HTML <del> element defines deleted (removed) text.
• The HTML <ins> element defines inserted (underlined) text.
• The HTML <sub> element defines subscripted text.
• The HTML <sup> element defines superscripted text.

27
Website Development

HTML Formatting Elements


<p>This text is normal.</p>

<p><b>This text is bold</b>.</p>

<p><i>This text is italic</i>.</p>

<h2>HTML <small>Small</small> Formatting</h2>

<h2>HTML <mark>Marked</mark> Formatting</h2>

<p>My favorite color is <del>blue</del> red.</p>

<p>My favorite <ins>color</ins> is red.</p>

<p>This is <sub>subscripted</sub> text.</p>

<p>This is <sup>superscripted</sup> text.</p>

28
Website Development

HTML Image
• HTML image is defined with the <img> tag.
• The source file src, alternative text alt and size of
width and height are provided as attributes.
• Save the image file within the same folder as
index.html file.
<img src="unicorn.png"alt="Unicorn Image"
width="300" height="400">

29
Website Development

HTML Hyperlink
• Hyperlinks is the backbone of the web.
• It will provide a way to jump from one page to the
other page.
• For one long web page, a hyperlink can be used as a
bookmark to jump from one part to another part of
the page, and back again.
• HTML link is defined with the <a> tag.
• href specifies the URL (web address) for a link.

30
Website Development

HTML Hyperlink
• Linking to website address:
<a href = "http://www.google.com/">Google
Search Engine</a>

31
Website Development

HTML Hyperlink
• Linking to email address:
<a href = "mailto:[email protected]">Email
Me</a>

32
Website Development

HTML Hyperlink
• Linking to pdf file:
<a href = "Chapter5.pdf">Download PDF</a>

• Save the pdf file within the same folder as index.html


file.

33
Website Development

HTML Hyperlink
• HTML bookmarks are used to allow readers to jump
to specific parts of the same web page.
• Bookmarks are practical if the website has long
pages.
• To make a bookmark, first create the bookmark:
<h2 id="section 1">SECTION 1</h2>

• Then add a link to it:


<a href="#section 1">Back to Section 1</a>

• When the link is clicked, the page will scroll to the


location with the bookmark.
34
Website Development

HTML Hyperlink
• Linking to bookmarks:
<h2 id="section 1">SECTION 1</h2>
info in section 1
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="section 2">SECTION 2</h2>
info in section 2
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#section 1">Back to Section 1</a>
<a href="#section 2">Back to Section 2</a>

35
Website Development

HTML Hyperlink
• Website will probably have lots of individual web
pages.
• Create the first web page, named as index.html as it
is the default page – visitors will see the default page
when typing your domain name into the browser's
address bar.
• Create the other web pages in the same folder as the
index.html file.
• Then add a link to it:
<a href = "about.html">Next Page</a>
36
Website Development

HTML Hyperlink
• Linking multiple web pages:
First page: index.html Second page: about.html

<!DOCTYPE html> <!DOCTYPE html>


<html> <html>
<body> <body>
<h1>First Page</h1> <h1>Second Page</h1>

<a href = "about.html">Next <a href = "index.html">Home


Page</a> Page</a>

</body> </body>
</html> </html>

37

You might also like