Scribd
Upload
91 views

Introduction To HTML

This document provides an introduction to HTML, the markup language used to structure and present content on the web. It outlines key HTML terminology and concepts, including tags, elements, attributes, and different types of elements. The document also demonstrates how to include common elements like paragraphs, headings, lists, images, and links in an HTML page and explains the difference between block-level and inline elements.

Uploaded by

Remuelito Maque Remulta
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
91 views

Introduction To HTML

This document provides an introduction to HTML, the markup language used to structure and present content on the web. It outlines key HTML terminology and concepts, including tags, elements, attributes, and different types of elements. The document also demonstrates how to include common elements like paragraphs, headings, lists, images, and links in an HTML page and explains the difference between block-level and inline elements.

Uploaded by

Remuelito Maque Remulta
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

HTML with CSS

Introduction to HTML The Language of the Web

OBJECTIVES

Know what HTML is


Learn the terminologies
Understand the anatomy of a web page
Understand tags and attributes
Learn how to use basic HTML elements
Difference between inline and block elements

Web pages are written in HyperText Markup Language


Whether your page contains a series of text-only blog entries, a dozen pictures of your
yourself (so vain),
or a heavily formatted screenplay
odds are that, if youre looking at it in a browser, its an HTML page!

HyperText means text with links in it.


Any time you click on a word that brings you to a new webpage, you've clicked on
hypertext!
A markup language is a language used to make text do more than just sit on a page: it can
turn text into images, links, tables, lists, and much more.
HTML is the markup language we'll be learning.

Its Role

HTML tells browsers how to display the contents of a web page, using special instructions
- called tags that instruct the browser when to start a paragraph, italicize a word, or display
a picture.
To create your own web pages, you need to learn to use this family of tags.

What makes webpages pretty?


That's CSSCascading Style Sheets.
Think of it like skin and makeup that covers the bones of HTML. We'll learn HTML first,
then worry about CSS in later courses.

The HTML Document

HTML tags are formatting instructions that tell a browser how to transform ordinary text into
something visually appealing.

The Anatomy of a web page


An HTML page is actually nothing more than a plain-vanilla text file.

Document Type Definition


The document type definition (DTD) is the first piece of information in an HTML file.
It tells the browser what markup standard you used to write the page.

Today, most web developers use the HTML5 doctype, which looks like this
<!DOCTYPE html>

Document Type Definition


When a browser encounters a page with a doctype, it switches into standards mode.
When you view a page with no doctype in multiple browsers, youre likely to get varying text sizes,
inconsistent margins and borders, and improperly positioned content.

<html>

This element wraps everything (other than the doctype) in your web page.

<head>

This element designates the header portion of your document. The header can include:

some optional information about your web page


including the required title
optional search keywords,
and an optional style sheet

<title>

This element sets the title for your web page.


ROLES
1. web browsers display the title at the top of the browser window
2. the browser uses the title to label the bookmark in your Bookmark menu
3. the search engine usually displays this title as the first line in the
search results

<body>

This element holds the actual content you want to display to the world.

Inserting Images
A picture can say a thousand words, and great images help make the difference between an averagelooking site and a really engaging one.
To insert an image

Adding Links
Links are the defining feature of the web because they allow you to move from one web page to
another.
Links are created using the <a> element.

HTML Tags

HTML tags are formatting instructions that tell a browser how to transform ordinary text into
something visually appealing.

Whats in a Tag?
You can recognize a tag by looking for angle brackets. Like this one

The tag known as a start tag, which means it switches on a paragraph.

Whats in a Tag?
Most start tags are paired with a matching end tag that switches off the effect.

Understanding Elements
This combination of start and end tags and the text in between them makes up an HTML element.

Types of Elements
CONTAINER ELEMENTS

STANDALONE ELEMENTS

<p> </p>

<img/>
<br/>

Nesting Elements

You can also nest one element inside another. In fact, nesting elements is one of the basic building
block techniques of web pages.
Heres an example:
This <b><i>word</i></b> has italic and bold formatting.

Attributes
Attributes provide additional information about the contents of an element. They appear on the opening tag of the
element and are made up of two parts:
a name and a value, separated by an equals sign.

Attributes

The attribute name indicates what kind of extra information


you are supplying about the element's content.
The attribute value is the information or setting for the attribute.
It should be placed in double quotes.
HTML5 allows you to use uppercase attribute names and
omit the quotemarks, but this is not recommended.

BLOCK ELEMENTS

Some elements will always appear to start on a new line in


the browser window.
These are known as block level elements.
Examples of block elements are <h1>, <p>

INLINE ELEMENTS

Some elements will always appear to continue on the same line as their neighbouring elements.

These are known as inline elements.


Examples of inline elements are <a>, <b>, and <img>

BASIC BLOCK-LEVEL ELEMENT


Paragraphs
<p></p>

A paragraph consists of one or more sentences that form a self-contained unit of discourse

Headings

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Heading elements are a good way to make titles stand out.


They display text in large, boldfaced letters. The lower the number, the larger the text, so <h1> produces
the largest heading.

Horizontal Rule
<hr/>

A horizontal line can help you separate one section of your web page from another.

Unordered List
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>

These elements let you build basic bulleted lists.


You can substitute <ul> with <ol> to get an automatically numbered list

BASIC INLINE-LEVEL ELEMENT


Bold
This is <b>bold!</b>

By enclosing words in the tags <b> and </b> we can make


characters appear bold.

Italic

This is <i>italic</i>

By enclosing words in the tags


<i> and </i> we can make
characters appear italic.

Line Break
<br />

If you wanted to add a line break inside the middle of a paragraph you can use the line break tag <br
/>.

Image

<img src=dog.jpg/>

To display an image inside a web page, use this element. Make sure you specify the src attribute to
indicate the file name of the picture you want the browser to show.

Anchor

<a href=http://www.google.com>Google</a>

The anchor element is the starting point for creating hyperlinks that let website visitors jump from one
page to another.

You might also like