Scribd
Upload
8 views

HTML 1

The document provides an introduction to HTML including basic HTML elements and tags, how to create HTML documents using text editors, common HTML formatting elements, and an overview of CSS styling. Key elements discussed include headings, paragraphs, links, images and tables.

Uploaded by

Jaima Nahin Nishe
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

HTML 1

The document provides an introduction to HTML including basic HTML elements and tags, how to create HTML documents using text editors, common HTML formatting elements, and an overview of CSS styling. Key elements discussed include headings, paragraphs, links, images and tables.

Uploaded by

Jaima Nahin Nishe
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Web Authoring

1. HTML Introduction
What is HTML?

a. HTML stands for Hyper Text Markup Language


b. HTML is the standard markup language for creating Web pages
c. HTML describes the structure of a Web page
d. HTML consists of a series of elements
e. HTML elements tell the browser how to display the content
f. HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.

A Simple HTML Document

Example
<!DOCTYPE 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 that this document is an HTML5
document
❖ The <html> element is the root element of an HTML page
❖ The <head> element contains meta information about the HTML page
❖ The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
❖ The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
❖ The <h1> element defines a large heading
❖ The <p> element defines a paragraph

1|Page
What is an HTML Element?

❖ An HTML element is defined by a start tag, some content, and an end tag:
❖ <tagname> Content goes here... </tagname>
❖ The HTML element is everything from the start tag to the end tag:
❖ <h1>My First Heading </h1>
❖ <p>My first paragraph. </p>

Start tag Element content End tag


<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none

2. HTML Editors
Learn 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 that using a simple text editor is a good way to learn HTML.

Follow the 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 "Display HTML files as HTML code
instead of formatted text".

2|Page
Then open a new document to place the code.

Step 2: Write Some HTML

Write or copy the following HTML code into Notepad:

<!DOCTYPE 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).

3|Page
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:

3. HTML Elements
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>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

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

4|Page
HTML Links

HTML links are defined with the <a> tag:

Example
<a href="https://www.google.com">This is a link</a>

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="google.jpg" alt="google image" width="104" height="142">

HTML Tables
HTML tables allow web developers to arrange data into rows and columns.

Example
Company Contact Country

Alfreds Futterkiste Maria Anders Germany

Centro comercial Moctezuma Francisco Chang Mexico

Ernst Handel Roland Mendel Austria

Island Trading Helen Bennett UK

Laughing Bacchus Winecellars Yoshi Tannamuri Canada

Magazzini Alimentari Riuniti Giovanni Rovelli Italy

5|Page
Table Cells

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.

tr stands for table row.

Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

Table Headers

Sometimes you want your cells to be table header cells. In those cases, use the <th> tag
instead of the <td> tag:

th stands for table header.

6|Page
Example

Let the first row be table header cells:

<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

HTML Formatting Elements

Formatting elements were designed to display special types of text:

Tags What it does Code Preview


<b> Bold text <b>This is a bold text</b> This is a bold text
<strong> Important text (makes it bold) <strong>This is a strong This is a strong text
text</strong>
<i> Italic text <i> This text is italic </i> This text is italic
<em> Emphasized text <em> This text is Emphasized This text is Emphasized
</em>
<mark> Marked text Do not forget to buy Do not forget to buy milk today.
<mark>milk</mark> today
<small> Smaller text This is some <small>smaller This is some smaller text.
text.</small>
<del> Deleted text My favorite color is My favorite color is blue red.
<del>blue</del> red.
<ins> Inserted text My favorite color is My favorite color is blue red.
<del>blue</del>
<ins>red</ins>.
<sub> Subscript text This is <sub>subscripted</sub> This is subscripted text.
text.
<sup> Superscript text This is <sup>subscripted</sup> This is subscripted text.
text.

7|Page
4. HTML RGB and RGBA Colors

RGB Color Values


In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)


Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and
255.

This means that there are 256 x 256 x 256 = 16777216 possible colors!

RGBA Color Values


RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the
opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)


The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

8|Page
5. HTML Styles – CSS
What is CSS?

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements,
how elements are positioned and laid out, what background images or background colors are
to be used, different displays for different devices and screen sizes, and much more!

Using CSS

CSS can be added to HTML documents in 3 ways:

• Inline - by using the style attribute inside HTML elements


• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of
the <p> element to red:

Example
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style>
element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue,
and the text color of ALL the <p> elements to red. In addition, the page will be displayed
with a "powderblue" background color:

9|Page
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

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

</body>
</html>

External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page:

Example (named index.html)


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

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

</body>
</html>

Now open notepad and paste the below code and then save it at styles.css. Note that you
should save the file in the same folder as your index file.
Code to be pasted in notepad:

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
10 | P a g e

You might also like