Scribd
Upload
207 views

HTML Course Introduction For Igcse

The document provides information about creating and viewing basic HTML pages using a simple text editor like Notepad or TextEdit. It explains how to write HTML tags and elements, add text formatting, and view the page in a web browser. Key topics covered include the <html>, <body>, <h1>, <p>, and <img> tags as well as attributes like href, src, width, height and alt.

Uploaded by

Chu Chillies
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
207 views

HTML Course Introduction For Igcse

The document provides information about creating and viewing basic HTML pages using a simple text editor like Notepad or TextEdit. It explains how to write HTML tags and elements, add text formatting, and view the page in a web browser. Key topics covered include the <html>, <body>, <h1>, <p>, and <img> tags as well as attributes like href, src, width, height and alt.

Uploaded by

Chu Chillies
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 36

HTML Editors

HTML (Hypertext Markup Language) is a text-based approach to describing


how content contained within an HTML file is structured. This markup tells a
web browser how to display text, images and other forms of multimedia on a
webpage.
HTML is a formal recommendation by the World Wide Web Consortium (W3C)
and is generally adhered to by all major web browsers, including both desktop
and mobile web browsers. HTML5 is the latest version of the specification.

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:

1
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".
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>

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

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:

W3Schools Online Editor - "Try it Yourself"

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

<!DOCTYPE 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>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

4
HTML Paragraphs
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links
HTML links are defined with the <a> tag:

<a href="https://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.
You will learn more about attributes in a later chapter.

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

View HTML Source Code:


Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in
Edge), or similar in other browsers. This will open a window containing the HTML source code
of the page.

5
An HTML element is defined by a start tag, some content,
and an end tag.
<tagname>Content goes here...</tagname>

HTML Attributes

● All HTML elements can have attributes


● Attributes provide additional information about elements
● Attributes are always specified in the start tag
● Attributes usually come in name/value pairs like:
name="value"

The href Attribute


The <a> tag defines a hyperlink. The href attribute specifies the URL of the
page the link goes to:
<a href="https://www.w3schools.com">Visit W3Schools</a>

The src Attribute


<img src="img_girl.jpg">
There are two ways to specify the URL in the src attribute:

6
1. Absolute URL - Links to an external image that is hosted on another website. Example:
src="https://www.w3schools.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission to use it, you
may be in violation of copyright laws. In addition, you cannot control external images; it can
suddenly be removed or changed.

2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not
include the domain name. If the URL begins without a slash, it will be relative to the current
page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the
domain. Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change domain.

The width and height Attributes


<img src="img_girl.jpg" width="500" height="600">

The alt Attribute


The required alt attribute for the <img> tag specifies an
alternate text for an image, if the image for some reason
cannot be displayed. This can be due to a slow connection, or
an error in the src attribute, or if the user uses a screen
reader.

<img src="img_girl.jpg" alt="Girl with a jacket">

EXAMPLE 10;
7
<!DOCTYPE html>

<html>

<body>

<h2>The alt Attribute</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image
get an understanding of what the image contains:</p>

<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">

</body>

</html>

EXAMPLE 11;
See what happens if we try to display an image that does not exist:
<img src="img_typo.jpg" alt="Girl with a jacket">
<!DOCTYPE html>
<html>
<body>

<img src="img_typo.jpg" alt="Girl with a jacket">

<p>If we try to display an image that does not exist, the value of the alt attribute
will be displayed instead. </p>

</body>
</html>

HTML Headings
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

8
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

HTML Paragraphs
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

EXAMPLE 12;

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

9
</p>

<p>

The number of lines in a paragraph depends on the size of the browser window. If you resize the
browser window, the number of lines in this paragraph will change.

</p>

</body>

</html>

HTML Styles
<tagname style="property:value;">
EXAMPLE OF ATTRIBUTE;

<!DOCTYPE html>

<html>

<body style="background-color:powderblue;">

<h1>This is a heading</h1>

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

</body>

</html>

Text Color
The CSS color property defines the text color for an HTML element:

<h1 style="color:blue;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

10
Fonts
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Text Size
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Text Alignment
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

HTML Formatting Elements


Formatting elements were designed to display special types
of text:
● <b> - Bold text
● <strong> - Important text
● <i> - Italic text
● <em> - Emphasized text
● <mark> - Marked text
● <small> - Smaller text
● <del> - Deleted text
● <ins> - Inserted text
● <sub> - Subscript text
● <sup> - Superscript text

HTML <b> and <strong> Elements


HTML Colors
EXAMPLE OF COLORS;

11
<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.

</p>

</body>

</html>

EXAMPLE OF COLORS;1

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>

<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>

<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>

<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>

12
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>

<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

</body>

</html>

HTML HEX Colors

HEX Color Values


In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as
decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other
two (green and blue) are set to 00.
Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and
the other two (red and blue) are set to 00.
To display black, set all color parameters to 00, like this: #000000.
To display white, set all color parameters to ff, like this: #ffffff.

13
EXAMPLE OF COLORS2;

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:#ff0000;">#ff0000</h1>

<h1 style="background-color:#0000ff;">#0000ff</h1>

<h1 style="background-color:#3cb371;">#3cb371</h1>

<h1 style="background-color:#ee82ee;">#ee82ee</h1>

<h1 style="background-color:#ffa500;">#ffa500</h1>

<h1 style="background-color:#6a5acd;">#6a5acd</h1>

</body>

</html>

Design a web page using HTML and CSS

Creating an attractive page will be difficult for those who are not experts in CSS. Without using CSS, you
will not be able to make the web page, more attractive. So in order to make a web page, we need to
have a knowledge of HTML and CSS.

Creating structure: In this section, we will create a simple structure of web page by using <li> and
<section> tags.

<!DOCTYPE html>

<html>

<head>

<title>

Simple web Development Template

</title>

14
</head>

<body>

<nav class="navbar background">

<ul class="nav-list">

<div class="logo">

<img src="logo.png">

</div>

<li><a href="#web">Web Technology</a></li>

<li><a href="#program">C Programming</a></li>

<li><a href="#course">Courses</a></li>

</ul>

<div class="rightNav">

<input type="text" name="search" id="search">

<button class="btn btn-sm">Search</button>

</div>

</nav>

<section class="firstsection">

<div class="box-main">

<div class="firstHalf">

<h1 class="text-big" id="web">

Web Technology

</h1>

<p class="text-small">

HTML stands for HyperText Markup

Language. It is used to design

web pages using a markup language.

HTML is the combination of Hypertext

and Markup language. Hypertext

defines the link between the web

15
pages. A markup language is used

to define the text document within

tag which defines the structure of

web pages. HTML is a markup language

that is used by the browser to

manipulate text, images, and other

content to display it in the required

format.

</p>

</div>

</div>

</section>

<section class="secondsection">

<div class="box-main">

<div class="secondHalf">

<h1 class="text-big" id="program">

C Programming

</h1>

<p class="text-small">

C is a procedural programming language.

It was initially developed by Dennis

Ritchie as a system programming

language to write operating system.

The main features of C language include

low-level access to memory, simple set

of keywords, and clean style, these

features make C language suitable for

system programming like operating system

16
or compiler development.

</p>

</div>

</div>

</section>

<section class="section">

<div class="paras">

<h1 class="sectionTag text-big">Java</h1>

<p class="sectionSubTag text-small">

Java has been one of the most

popular programming language

for many years. Java is Object

Oriented. However it is not

considered as pure object oriented

as it provides support for primitive

data types (like int, char, etc) The

Java codes are first compiled into byte

code (machine independent code). Then

the byte code is run on Java Virtual

Machine (JVM) regardless of the

underlying architecture.

</p>

</div>

<div class="thumbnail">

<img src="img.png" alt="laptop image">

</div>

</section>

<footer class="background">

17
<p class="text-footer">

Copyright ©-All rights are reserved

</p>

</footer>

</body>

</html>

What is a Table in HTML?


To create a table in HTML you will need to use tags. The most important one is the
<table> tag which is the main container of the table. It shows where the table will
begin and where it ends.
Tables are a great way to represent tabular data, and you can create them using basic
HTML elements like <table>,<tr>, <td>.

Common HTML Table tags


Other tags include:

● <tr> - represents rows


● <td> - used to create data cells
● <th> - used to add table headings
● <caption> - used to insert captions
● <thead> - adds a separate header to the table
● <tbody> - shows the main body of the table
● <tfoot> - creates a separate footer for the table

Commonly used HTML tags

HTML tags dictate the overall structure of a page and how the elements within
them will be displayed in the browser. Commonly used HTML tags include:

18
● <h1> which describes a top-level heading.
● <h2> which describes a second-level heading.
● <p> which describes a paragraph.
● <table> which describes tabular data.
● <ol> which describes an ordered list of information.
● <ul> which describes an unordered list of information.

HTML Table Syntax:

<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

How to Add a Table Heading in HTML


The <th> is used to add headings to tables. In basic designs the table heading will always take the top
row, meaning we will have the <th> declared in our first table row followed by the actual data in the
table. By default the text passed in the Heading is centered and Bold.

An example with use of <th>


<table>
<tr>

19
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
</tr>
<tr>
<td>Hillary</td>
<td>Nyakundi</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Lary</td>
<td>Mak</td>
<td>[email protected]</td>
</tr>
</table>

How to Add a Caption to a Table


To insert a caption into a table, use the <caption> tag.
<table>
<caption></caption>
<tr> </tr>
</table>
---------------------------------------------------------------------------
<table>
<caption>Free Coding Resources</caption>
<tr>
<th>Sites</th>
<th>Youtube Channels</th>
<th>Mobile Appss</th>
</tr>
20
<tr>
<td>Freecode Camp</td>
<td>Freecode Camp</td>
<td>Enki</td>
</tr>
<tr>
<td>W3Schools</td>
<td>Academind</td>
<td>Programming Hero</td>
</tr>
<tr>
<td>Khan Academy</td>
<td>The Coding Train</td>
<td>Solo learn</td>
</tr>
</table>

How to Use the Scope Attribute in HTML Tables


The scope attribute is used to define whether a specific header is intended for
either a column, row, or a group of both. The attribute is declared in the header cell
<th>, and it takes the values col, row, colgroup and rowgroup. What the scope
attribute has done, is that it shows whether a header cell belongs to either the
column, row, or a group of both.

21
<table>
<tr>
<th scope="value">
</tr>
</table>

An Example with use of <scope>


In this case the headers belong to the column because it's what we set in the code.
You can play around by changing the attribute to see the different behaviors.

<table>
<tr>
<th></th>
<th scope="col">Semester</th>
<th scope="col">Grade</th>
</tr>

<tr>
<td>1</td>
<td>Jan - April</td>
<td>Credit</td>
</tr>

<tr>
<td>2</td>
<td>May - August</td>
<td>Pass</td>
</tr>

<tr>
<td>2</td>
<td>September - December</td>
<td>Distinction</td>
</tr>
</table>

22
How to Use Cell Spanning in an HTML Table
Perhaps you have come across cells that stretch across two or more columns or
rows in a table. That's called cell spanning. he same features can be applied in an
HTML table by using two cell attributes, colspan for horizontal spanning and
rowspan for vertical spanning.

An Example with use of span


The two attributes are assigned numbers greater that zero which shows the number
of cells you wish to span. In the example above, we have a cell spanning of 2 cells
in the rows and 3 cells in the column as indicated. When using the attributes
colspan and rowspan, make sure to declare the values assigned correclty to avoid
overlapping of cells.
<table>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td rowspan = "2">Hillary</td>
<td>Advanced Web</td>
<td>75</td>
23
</tr>
<tr>
<td>Operating Syatem</td>
<td>60</td>
</tr>
<tr>
<td rowspan = "2">Lary</td>
<td>Advanced Web</td>
<td>80</td>
</tr>
<tr>
<td>Operating Syatem</td>
<td>75</td>
</tr>
<tr>
<td colspan="3">Total Average: 72.5</td>
</tr>
</table>

24
How to Add a Table Header, Body, & Footer in HTML
Tables
In a table they are divided by using attributes namely:

● <thead> - provides a separate haeder for the table


● <tbody> - conatins main content of the table
● <tfoot> - creates a separete footer for the table

An Example with use of <thead>, <tbody> & <tfoot>


<table>
<thead>
<tr>
<th colspan="2">October</th>
<th colspan="2">November</th>
</tr>
</thead>

<tbody>
<tr>
<td>Sales</td>
<td>Profit</td>
<td>Sales</td>
<td>Profit</td>
</tr>
<tr>
<td>$200,00</td>
<td>$50,00</td>
<td>$300,000</td>
<td>$70,000</td>
</tr>
</tbody>

<tfoot>
<tr>
<th colspan= "4">November was more produstive</th>
</tr>
</tfoot>
25
</table>

A Table With a Width 50% of the Width of the Window

26
<TABLE BORDER=1 WIDTH="50%">
<TR>
<TD>Red</TD>
<TD>Green</TD>
<TD>Blue</TD>
</TR>
<TR>
<TD>Orange</TD>
<TD>Yellow</TD>
<TD>Purple</TD>
</TR>
</TABLE>

A Table With a Fixed Width of 200 Pixels


<TABLE BORDER=1 WIDTH=200>
<TR>
<TD>Red</TD>
<TD>Green</TD>
<TD>Blue</TD>
</TR>
<TR>
<TD>Orange</TD>
<TD>Yellow</TD>
<TD>Purple</TD>
</TR>
</TABLE>

A Table Containing a Cell With a Fixed Width of 200 Pixels


<TABLE BORDER=1>
<TR>
<TD>Red</TD>
<TD WIDTH=200>Green</TD>
<TD>Blue</TD>
</TR>
<TR>
<TD>Orange</TD><TD>Purple</TD>
<TD>Yellow</TD>
</TABLE>

27
</TR>

A Table Containing a Cell With a Fixed Height of 100 Pixels


<TABLE BORDER=1>
<TR>
<TD>Red</TD>
<TD HEIGHT=100>Green</TD>
<TD>Blue</TD>
</TR>
<TR>
<TD>Orange</TD>
<TD>Yellow</TD>
<TD>Purple</TD>
</TR>
</TABLE>

A Table With a Proportional Height of 40%


<TABLE BORDER=1 HEIGHT="40%">
<TR>
<TD>Red</TD>
<TD>Green</TD>
<TD>Blue</TD>
</TR>
<TR>
<TD>Orange</TD>
<TD>Yellow</TD>
<TD>Purple</TD>
</TR>
</TABLE>

A Table With a Fixed Height of 200 Pixels


<TABLE BORDER=1 HEIGHT=200>
<TR>
<TD>Red</TD>
<TD>Green</TD>
<TD>Blue</TD>

28
</TR>
<TR>
<TD>Orange</TD>
<TD>Yellow</TD>
<TD>Purple</TD>
</TR>
</TABLE>

How to set table width in HTML?


In above example we used width=50%, it will expand our table to the 50% of the
browser tab size on the web page.
<table style="width: width value in percentage">… </table>

<!DOCTYPE html>
<html>
<style>
table {
border:1px solid black;
padding: 10px;
}
th, td{
border:1px solid black;
padding: 20px;
}
</style>
<body>
<h2>Tables in HTML</h2>
<table style="width: 50%">
<tr>
<th>Name </th>
<th>Job role</th>
</tr>
<tr>

29
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

Following is another example program to set table width in HTML.


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid green;
}
</style>
</head>
<body>
<table style="width:100%">
<caption>Cricketers...</caption>
<tr style="background-color: Mediumseagreen">
<th>S.no</th>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>1</td>
<td>babar azam</td>
<td>34</td>
<td>pakistan</td>
</tr>
30
<tr>
<td>2</td>
<td>Shami</td>
<td>29</td>
<td>India</td>
</tr>
<tr style="background-color: Mediumseagreen">
<td>3</td>
<td>Cummins</td>
<td>33</td>
<td>Australia</td>
</tr>
</table>
</body>
</html>

Fundamentals of HTML tables


Exp;1
<table>

<tr>

<td>Column 1</td>

<td>Column 2</td>

<td>Column 3</td>

</tr>

<tr>

<td>Column 1</td>

<td>Column 2</td>

<td>Column 3</td>

31
</tr>

</table>

Exp:2
<table>

<tr>

<td>Column 1</td>

<td>Column 2</td>

<td>Column 3</td>

<td>Column 4</td>

</tr>

<tr>

<td>Column 1</td>

<td>Column 2</td>

<td>Column 3</td>

<td>Column 4 </td>

</tr>

<tr>

<td>Column 1</td>

<td>Column 2</td>

<td>Column 3</td>

<td>Column 4</td>

</tr>

</table>

Adding a border to a table


In general, tables should be styled with CSS. If you do not know CSS, you can add some light
styling using HTML by adding the attributes to the <table> element. For example, you can add a
border to the table with the border attribute:

Exp:3

32
<table border="1">
<tr>
<td>Row 1</td>
<td>Row 2</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 1</td>
<td>Row 2</td>
<td>Row 3</td>
</tr>
</table>

Adding heading to Rows and Columns


Headings are added by using opening and closing <th> tags. To add column headers, you must
insert a new <tr> element at the top of your table where you can add the column names using
<th> tags.
<table border="1">
<tr>
<th></th>
<th>Column Header 1</th>
<th>Column Header 2</th>
<th>Column Header 3</th>
</tr>
</table>

Exp:4
<table border="1">
<tr>

33
<th></th>
<th>Column Header 1</th>
<th>Column Header 2</th>
<th>Column Header 3</th>
</tr>
<tr>
<th>Row Header 1</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Row Header 2</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Row Header 3</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>

34
How to use and implement HTML

Because HTML is completely text-based, an HTML file can be edited simply


by opening it up in a program such as Notepad++, Vi or Emacs. Any text
editor can be used to create or edit an HTML file and, so long as it is named
with an .html file extension, any web browser -- such as Chrome or Firefox --
will be capable of displaying the file as a webpage.

For professional software developers, there are a variety of WYSIWYG


editors to develop webpages. NetBeans, IntelliJ, Eclipse and Microsoft's
Visual Studio provide WYSIWYG editors as either plugins or as standard
components, making it incredibly easy to use and implement HTML.

Chrome and Firefox both include HTML developer tools that allow for the
immediate viewing of a webpage's complete HTML file, along with the
ability to edit HTML on the fly and immediately incorporate changes within
the internet browser.

It's important to note as well that the language HTML works with is basic
English. Non-English characters -- or letters -- such as Chinese, or special
symbols -- like letters with accent marks -- may not display correctly on a
webpage by default. In order to accommodate special character sets, users
need to specify the character encoding with an element that looks like this:

35
<meta charset="utf-8"/>. In this case, utf-8 is the character set. Utf-8 is
HTML's default English charset.
Add the opening and closing <head> tags inside of the <html> tags. Next,
add two additional lines of HTML code inside the <head> tags like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sammy’s First Website</title>
</head>
</html>

Another syntax rule is that HTML attributes should be enclosed within single or double
quotes.The best advice for choosing between single and double quotes is to keep the usage
consistent across all the documents.

36

You might also like