Basic HTML

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>

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  describes an HTML
comment which are not displayed by the browser.
• With comments you can place notification and
reminder in your HTML.

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

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

• 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

<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:aidil@gmail.com">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:
info in section 1
<br><br><br><br><br><br><br><br><br><br><br><br><br>
info in section 2
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

Basic HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Basic HTML

Загружено:

Авторское право:

Доступные форматы

Website Development

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

<h1>My First Heading</h1>

<h1>This is heading 1</h1>

HTML Comment Tag

HTML Horizontal Rule

HTML Line Break

HTML Text Alignment

HTML Formatting Elements

HTML Formatting Elements

HTML Formatting Elements

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

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

• Then add a link to it:

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

<!DOCTYPE html> <!DOCTYPE html>

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

Вам также может понравиться