COMPUTER SCIENCE
GRADE 9-UNIT 2
HTML
2.1 HTML Introduction
What is HTML?
HTML is a markup language
for describing web documents (web pages).
·
HTML stands for Hyper Text Markup Language
·
A markup language is a
set of markup tags
·
HTML documents are
described by HTML tags
·
Each HTML tag describes different
document content
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
·
The <!DOCTYPE
html> declaration
defines this document to be HTML5
·
The text between <html> and </html> describes an HTML document
·
The text between <head> and </head> provides information about the
document
·
The text between <title> and </title> provides a title for the document
·
The text between <body> and </body> describes the visible page content
·
The text between <h1> and </h1> describes a heading
·
The text between <p> and </p> describes a paragraph
2.2 HTML Editors
Write HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional
HTML editors.
However, for learning HTML we recommend a simple text editor
like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way to learn
HTML.
Follow the four steps below to create your first web page
with Notepad or TextEdit.
Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the
bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories
> Notepad
Step 1: Open TextEdit (Mac)
Open Finder > Applications > TextEdit
Also change some preferences to get the application to save
files correctly. In Preferences > Format > choose "Plain
Text"
Then under "Open and Save", check the box that
says "Ignore rich text commands in HTML files".
Then open a new document to place the code.
Step 2: Write Some HTML
Write or copy some HTML into Notepad.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as
in the Notepad menu.
Name the file "index.htm" and set the
encoding to UTF-8 (which is the preferred encoding for HTML files).
You can use either .htm or .html as file extension. There is
no difference, it is up to you.
Step 4: View the HTML Page in Your
Browser
Open the saved HTML file in your favorite browser (double
click on the file, or right-click - and choose "Open with").
The result will look much like this:
2.3 HTML Basic Examples
HTML Documents
All
HTML documents must start with a document type declaration: <!DOCTYPE
html>.
The
HTML document itself begins with <html> and ends with </html>.
The
visible part of the HTML document is between <body> and </body>.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Headings
HTML
headings are defined with the <h1> to <h6>
tags.
<h1>
defines the most important heading. <h6> defines the least important
heading:
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
HTML
paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML
links are defined with the <a> tag:
Example
<a href="http://www.w3schools.com">This is a link</a>
The
link's destination is specified in the href attribute.
Attributes
are used to provide additional information about HTML elements.
HTML Images
HTML
images are defined with the <img> tag.
The
source file (src), alternative text (alt), width, and height are provided as
attributes:
Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
2.4 HTML Elements
An
HTML element usually consists of a start tag and end tag, with the content inserted in between:
<tagname>Content goes here...</tagname>
The
HTML element is everything from the start tag to the end tag:
<p>My first paragraph.</p>
|
Start
tag
|
Element content
|
End tag
|
|
<h1>
|
My First
Heading
|
</h1>
|
|
<p>
|
My first
paragraph.
|
</p>
|
|
<br>
|
|
|
HTML
elements with no content are called empty elements. Empty elements do not have
an end tag, such as the <br> element (which indicates a line break).
Nested HTML Elements
HTML
elements can be nested (elements can contain elements).
All
HTML documents consist of nested HTML elements.
This
example contains four HTML elements:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
The <html>
element defines the whole document.
It
has a start tag <html> and an end tag
</html>.
The
element content is another HTML element (the <body> element).
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <body>
element defines the document body.
It
has a start tag <body> and an end tag
</body>.
The
element content is two other HTML elements (<h1> and
<p>).
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
The <h1>
element defines a heading.
It
has a start tag <h1> and an end tag
</h1>.
The
element content is: My First Heading.
<h1>My First Heading</h1>
The <p> element
defines a paragraph.
It
has a start tag <p> and an end tag
</p>.
The
element content is: My first paragraph.
<p>My first paragraph.</p>
Do Not Forget the End Tag
Some
HTML elements will display correctly, even if you forget the end tag:
Example
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
2.5 HTML Attributes
- All HTML elements can have attributes
- Attributes provide additional information about an element
- Attributes are always specified in the start tag
- Attributes usually come in name/value pairs like: name="value"
The lang Attribute
The language of the document can be
declared in the <html> tag.
The language is declared with the lang
attribute.
Declaring a language is important
for accessibility applications (screen readers) and search engines:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
<html lang="en-US">
<body>
...
</body>
</html>
The first two letters specify the language (en). If
there is a dialect, use two more letters (US).
The title Attribute
Here, a title attribute is added to
the <p> element. The value of the title attribute will
be displayed as a tooltip when you mouse over the paragraph:
Example
<p title="I'm a tooltip">
This is a paragraph.
</p>
<p title="I'm a tooltip">
This is a paragraph.
</p>
The href Attribute
HTML links are defined with the <a>
tag. The link address is specified in the href attribute:
Example
<a href="http://www.w3schools.com">This
is a link</a>
You will learn more about links and the <a> tag
later in this tutorial.
Size Attributes
HTML images are defined with the <img>
tag.
The filename of the source (src),
and the size of the image (width and height)
are all provided as attributes:
Example
<img src="w3schools.jpg" width="104" height="142">
The image size is specified in pixels:
width="104" means 104 screen pixels wide.
You will learn more about images and the <img>
tag later in this tutorial.
The alt Attribute
The alt attribute specifies an
alternative text to be used, when an image cannot be displayed.
The value of the attribute can be read by screen
readers. This way, someone "listening" to the webpage, e.g. a blind
person, can "hear" the element.
Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Sometimes it is necessary to use
quotes. This example will not display the title attribute correctly, because it
contains a space:
Example
<p title=About W3Schools>
Using quotes are the most common. Omitting quotes can
produce errors.
At W3Schools we always use quotes around attribute values.
At W3Schools we always use quotes around attribute values.
Tidak ada komentar:
Posting Komentar