Scribd
Upload
20 views

Basic (HTML, CSS, JavaScript)

HTML is the primary markup language used to structure and present content on the World Wide Web. It uses tags to define headings, paragraphs, lists, and other elements. The HTML code provided shows the basic structure of an HTML document, including the <html>, <head>, and <body> tags. It also demonstrates common elements like <h1> headings, <p> paragraphs, and <a> links. HTML works by using tags to define the meaning and purpose of different parts of a web page's content.

Uploaded by

Kyaw Zin Nyein
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

Basic (HTML, CSS, JavaScript)

HTML is the primary markup language used to structure and present content on the World Wide Web. It uses tags to define headings, paragraphs, lists, and other elements. The HTML code provided shows the basic structure of an HTML document, including the <html>, <head>, and <body> tags. It also demonstrates common elements like <h1> headings, <p> paragraphs, and <a> links. HTML works by using tags to define the meaning and purpose of different parts of a web page's content.

Uploaded by

Kyaw Zin Nyein
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

What is HTML?

In simple words, HTML is the primary building block for creating and structuring website
content.

Example of HTML

<!DOCTYPE html>
<html>
<head>
<title>Let’s Learn Programming Myanmar</title>
</head>
<body>
<h1>HTML Tutorial</h1>
<p>You'll learn about HTML.</p>
</body>
</html>

In the above program,

• <!DOCTYPE html> - defines that this document is an HTML document


• <html> -root element of an HTML page which encloses all other elements in the HTML
page
• <head> - contains information about the page, such as the title and metadata
• <title> - specifies a title for the HTML page which is shown in the browser's title bar
• <body> - defines the main content of the page and is a container for all the visible
contents, such as headings, paragraphs, lists, etc
• <h1> - defines a heading
• <p> - defines a paragraph of HTML document

How HTML works?

HTML works by defining the structure and content of a web page using a series of tags like
<h1>, <p>, etc. Each tag has a meaning and can be used to define the purpose of the content it
encloses. For example,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Let’s Learn Programming Myanmar</title>
</head>
<body>

1
<center><h1>Let’s Learn Programming Myanmar</h1></center>
<h1>Learn to Code for Free</h1>
<p>
Learn to code with our beginner-friendly tutorials and examples.
Read interactive tutorials, and write and test your code to learn programming.
<p>
<button>Join for free</button>
</body>
</html>

HTML Basics
<!DOCTYPE html>
<html>
<head>
<title>My web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
<p>It contains a
<strong>main heading</strong> and <em> paragraph </em>.
</p>
</body>
</html>

What are HTML Attributes?

2
<a href="http://example.com"> Example </a>

HTML Syntax

We need to follow a strict syntax guidelines to write valid HTML code. This includes the use of
tags, elements, and attributes, as well as the correct use of indentation and white space. Here are
some key points about HTML syntax:

1. HTML tags consist of the element name, wrapped in angle brackets. For example, <h1>, <p>,
<img> are some HTML tags.

2. HTML elements are created by enclosing the content of the element inside the opening and
closing tags of the element.

3. HTML attributes are used to provide additional information about HTML elements and are
specified in the opening tag of the element.
4. HTML code should be well-formed and properly indented, with each element on its own line
and each level of hierarchy indented by one level. This makes the code easier to read and
understand and can help to avoid errors. For example,
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>My First HTML Page</h1>
<p> Hello World!</p>
</body>
</html>

HTML Paragraphs
The HTML <p> tag is used to create paragraphs. For example,

<p>HTML is fun to learn.</p>

<p>Paragraph 1: Short Paragraph</p>

3
<p>Paragraph 2: Long Paragraph, this is a long paragraph with more text to fill an entire line in
the website.</p>

<p>
The paragraph tag removes all extra spaces.

The paragraph tag also removes all extra lines.


</p>

<p>We can use the <br> HTML br tag <br> to add a line break.</p>

Adding Line Breaks in Paragraphs


We can use the HTML line break tag, <br>, to add line breaks within our paragraphs. For example,

<p>We can use the <br> HTML br tag <br> to add a line break.</p>

Pre-formatted Text in HTML


<pre>
This text
will be
displayed

in the same manner


as it is written
</pre>

4
Other Elements Inside Paragraphs
<p>

We can use other tags like <strong>the strong tag to emphasize text</strong>

</p>

Paragraph is Block-level
The <p> tag is a block-level element. It starts on a new line and takes up the full width (of its
parent element).

Add Extra Space Inside Paragraphs


As discussed earlier, we cannot normally add extra empty spaces inside paragraphs. However,
we can use a certain HTML entity called non-breaking space to add extra spaces. For example,

<p>Extra space &nbsp;&nbsp; inside a paragraph</p>

HTML Headings
The HTML heading tags (<h1> to <h6>) are used to add headings to a webpage. For example,

<h1>This is heading 1.</h1>

<h2>This is heading 2.</h2>

<h3>This is heading 3.</h3>

<h4>This is heading 4.</h4>

<h5>This is heading 5.</h5>

<h6>This is heading 6.</h6>

Headings are block-level elements


The Headings <h1> to <h6> tags are block-level elements. They start on a new line and take up
the full width of their parent element. For example,
5
<h1>Headings</h1> <h2>are</h2> <h3>fun!</h3>

HTML Comments
<!-- heading 2 -->
<h2>Comments in HTML</h2>

Here, <!-- heading 2 --> is a comment. In HTML, comments start with <!-- and ends with -->

<!-- an HTML div -->

<div>

<p>HTML is fun to learn.</p>

</div>

Single-Line and Multi-line Comments


In HTML, we use the same syntax to create single-line and multi-line comments.

<!-- Write a heading -->

<h1>Important Heading</h1>

<!-- Multiple Line comments

can include line breaks

and also extra spaces -->

<p>this will display in the webpage</p>

HTML Tags Inside Comments

6
If we put HTML elements inside comments, they will be ignored. For example,

<p>this will be displayed</p>

<!-- <p>this will not be displayed</p> -->

<p>this will also be displayed</p>

HTML Table

<table border="1" >

<tr>

<th>Name</th>

<th>Age</th>

<th>Country</th>

</tr>

<tr>

<td>Harry Depp</td>

<td>28</td>

<td>Britain</td>

</tr>

<tr>

<td>John Smith</td>

<td>35</td>

<td>USA</td>

</tr>

<tr>

<td>Ram Krishna</td>

7
<td>19</td>

<td>Nepal</td>

</tr>

</table>

In the above example, you can see we have used multiple tags to create a table in HTML.

• <table>
• <tr>
• <td>
• <th>

Table tag <table> in HTML


The <table> tag is used to define a table. For example,

Table Row <tr> in HTML


The <tr> tag is used to define a row in a table. For example,

The table row can include either table heading, <th> or table data, <td>.

<tr>

<th>Name</th>

<th>Country</th>

</tr>

<tr>

<td>Prasanna</td>

<td>Nepal</td>

</tr>

<tr>

<td>Simon</td>

<td>USA</td>

</tr>

8
Table Heading, <th> in HTML
The <th> tag is used to define a table header. It is generally the top row of the table. For
example,

<table>

<tr>

<th>Item</th>

<th>Count</th>

</tr>

<tr>

<td>Mango</td>

<td>125</td>

</tr>

<tr>

<td>Orange</td>

<td>75</td>

</tr>

</table>

Table Cell <td> in HTML


The <td> tag is used to define table cells (data). The table cells store data to be displayed in the
table. For example,

<tr>

<td>Apple</td>

<td>Mango</td>

<td>Orange</td>

</tr>

In the above example, <td>Apple</td>, <td>Mango</td> and <td>Orange</td> are table


cells.

9
Table cells are generally inside the table row or table headers.

Table Border
<table border="1">
...
</table>

In HTML, the border attribute is used to add a border to a table and all the cells.

<table border="1" style="border-collapse: collapse;">


...
</table>

Table Head, Body, and Footer


The HTML table can be divided into three parts: a header, a body, and a footer.

We use the <thead> tag to add a table head. The <thead> tag must come before any other tags
inside a table. For example,

<table>
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
</tr>
</thead>

...
...
</table>

Table Body

We use the <tbody> tag to add a table body. The <tbody> tag must come after <thead> and
before any other tags inside a table. For example,

<table>
<thead>
...
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>

10
</tr>
</tbody>

...
...
</table>

Table Footer

We use the <tfoot> tag to add a table footer. The <tfoot> tag must come after <tbody> and
before any other tags inside a table. For example,

<table>
<thead>
...
</thead>
<tbody>
,,,,
</tbody>
<tfoot>
<tr>
<td>foot 1</td>
<td>foot 2</td>
</tr>
</tfoot>
</table>

Example: HTML Table Head, Body, and Footer


<table>
<thead>
<tr>
<th>S.N</th>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Apple</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>Mango</td>
<td>2</td>

11
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Total</td>
<td>5</td>
</tr>
</tfoot>
</table>

Colspan and Rowspan


Colspan

The colspan attribute merges cells across multiple columns. For example,

<table>
<tr>
<th>S.N</th>
<th>Item</th>
<th>Quantity</th>
</tr>
<tr>
<td>1</td>
<td>Apple</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>Mango</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>1</td>
</tr>
<tr>
<td colspan="2">Total</td>

12
<td>5</td>
</tr>
</table>

Rowspan

The rowspan attribute merges cells across multiple rows. For example,

<table>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td rowspan="3">Mark Smith</td>
<td>English</td>
<td>67</td>
</tr>
<tr>
<td>Maths</td>
<td>82</td>
</tr>
<tr>
<td>Science</td>
<td>91</td>
</tr>
</table>

HTML Lists
HTML lists are used to display related information in an easy-to-read and concise way as lists.

We can use three types of lists to represent different types of data in HTML:

1. Unordered List <ul>


2. Ordered List <ol>
3. Description List <dl>

Unordered List
The unordered list is used to represent data in a list for which the order of items does not matter.

13
In HTML, we use the <ul> tag to create unordered lists. Each item of the list must be a <li> tag
which represents list items. For example,

<ul>

<li>Apple</li>

<li>Orange</li>

<li>Mango</li>

</ul>

Ordered List
The ordered list is used to represent data in a list for which the order of items has significance.

The <ol> tag is used to create ordered lists. Similar to unordered lists, each item in the ordered
list must be a <li> tag. For example,

<ol>

<li>Ready</li>

<li>Set</li>

<li>Go</li>

</ol>

Description List
The HTML description list is used to represent data in the name-value form. We use the <dl> tag
to create a definition list and each item of the description list has two elements:

• term/title - represented by the <dt> tag


• description of the term - represented by the <dd> tag

<dl>

<dt>HTML</dt>

<dd>Hyper-Text Markup Language</dd>

14
<dt>CSS</dt>

<dd>Cascading StyleSheets</dd>

<dt>JS</dt>

<dd>Javascript</dd>

</dl>

Tags used in HTML lists


Tag Explanation
<ol> Defines an ordered list.
<ul> Defines an unordered list.
<dl> Defines a description list.
<li> Defines a list item in ordered or unordered lists.
<dt> Defines a term in description list.
<dd> Defines the description of a term in the description list.

HTML Unordered List


<ul>

<li>Apple</li>

<li>Mango</li>

<li>Orange</li>

<li>Banana</li>

</ul>

Unordered Lists Marker


We use the CSS list-style-type property to change the marker that marks the list item. The valid
options for markers are

Icon Marker Description


• (default) disc sets the marker to a dot

15
○ circle sets the marker to a hollow circle
▪ square sets the marker to a filled black square
none removes the marker altogether

Nesting Lists
In HTML, we can create a nested list by adding one list inside another. For example,

<ul>

<li>

Coffee

<ul>

<li>Cappuccino</li>

<li>Americano</li>

<li>Espresso</li>

</ul>

</li>

<li>

Tea

16
<ul>

<li>Milk Tea</li>

<li>Black Tea</li>

</ul>

</li>

<li>Milk</li>

</ul>

Ordered List inside Unordered List

Similarly, we can also mix list types while nesting and add ordered lists inside the unordered list.
For example,

<ul>

<li>

Coffee

<ol>

<li>Cappuccino</li>

<li>Americano</li>

<li>Espresso</li>

</ol>

</li>

<li>

Tea

<ol>

<li>Milk Tea</li>

17
<li>Black Tea</li>

</ol>

</li>

<li>Milk</li>

</ul>

Multi-level Nesting of Unordered List

In our examples, we are nesting the list up to a single level, however, we can also nest lists up to
multiple levels. This might be important while creating lists like Table of Content. For example,

18
19
HTML Ordered List

We use the <ol> tag to create an unordered list. For example,

<ol>

<li>Name</li>

<li>Address</li>

<li>Phone Number</li>

</ol>

Ordered Lists Type


We use the type attribute to change the marker for the list. There are five types of numbering in
the ordered list. They are

Type Description
"1"(Default) The list is numbered with numbers.
"a" The list is numbered with lower-case alphabets.
"A" The list is numbered with upper-case alphabets.
"i" The list is numbered with lower-case roman numerals.
"I" The list is numbered with upper-case roman numerals.

start Attribute
We use the start attribute to change the starting point for the numbering of the list. For example,
20
<ol start='5'>

<li>Harry</li>

<li>Ron</li>

<li>Sam</li>

</ol>

This attribute also works with other types. For example,

<ol type="a" start='5'>

<li>Harry</li>

<li>Ron</li>

<li>Sam</li>

</ol>

reversed Attribute
We can use the reversed attribute on the ordered list to reverse the numbering on the list. For
example,

<ol reversed>

<li>Cat</li>

<li>Dog</li>

<li>Elephant</li>

<li>Fish</li>

</ol>

Nesting Lists
In HTML, we can create a nested list by adding one list inside another. For example,

<ol type="I">

<li>

Chapter 1

21
<ol type="a">

<li>Lesson 1</li>

<li>Lesson 2</li>

</ol>

</li>

<li>

Chapter 2

<ol type="a">

<li>Lesson 1</li>

<li>Lesson 2</li>

<li>Lesson 3</li>

</ol>

</li>

<li>

Chapter 3

<ol type="a">

<li>Lesson 1</li>

</ol>

</li>

</ol>

we can also mix list types while nesting and add an unordered list inside the ordered list. For
example,

<ol>

<li>

Prepare the ingredients.

<ul>

<li>Eggs</li>

<li>Salt</li>
22
<li>Butter</li>

</ul>

</li>

<li>

Mix the ingredients and cook on a low flame.

</li>

<li>

Serve hot with garnish. You can use

<ul>

<li>Chives</li>

<li>Bacon</li>

<li>Coriander</li>

</ul>

</li>

</ol>

HTML Description List


In HTML, we use the <dl> tag to create a description list. For example,

<dl>

<dt>HTML</dt>

<dd>Hyper Text Markup Language</dd>

<dt>CSS</dt>

<dd>Cascading Style Sheets</dd>

23
</dl>

Here, you can see two different types of list items:

• <dt> - defines the terms/name


• <dd> - defines the description/value of the term/name

Multiple Terms and Multiple Definitions


As we have seen, the definition list is used to display data in a key/value format, where the <dt>
tag indicates the key elements and the <dd> tag element indicates the value (definition) of the
key.

However, while creating a description list, it's not necessary that a single <dt> tag (key) should
have a single <dd> tag (value). We can have any combination of the <dt> and <dd> elements.

Possible Combinations of terms and term descriptions:

• Single term (<dt>) with a single definition (<dd>).


• Multiple terms (<dt>) with a single definition (<dd>).
• Multiple definitions (<dd>) with a single term (<dt>).

Let's take a look at a few examples,

1. Single Term and Description


<dl>

<dt>HTML</dt>

<dd>Hyper Text Markup Language</dd>

<dt>CSS</dt>

<dd>Cascading Style Sheets</dd>

</dl>

2. Single Term and Multiple Description


<dl>

24
<dt>HTML</dt>

<dd>HyperText Markup Language.</dd>

<dd>Used to create Websites.</dd>

<dd>Released in 1993.</dd>

</dl>

3. Multiple Terms and Single Description

<dl>

<dt>HTML</dt>

<dd>is markup language</dd>

<dt>Python</dt>

<dt>Java</dt>

<dd>are programming languages.</dd>

</dl>

25
HTML Line break
The HTML Line Break tag is used to apply a line break and start your text in the new line.

In HTML, we use the <br> tag to create a line break. For example,

<p>

Use the <br> br tag <br> to create line breaks in text.

</p>

Line-Break vs Multiple Paragraphs


As we know, an HTML paragraph always starts on a new line, instead of a line break we can
also use multiple paragraphs. For example,

<p>Use the</p>

<p> br tag</p>

<p> to create line breaks in text.</p>

Example: Line breaks using HTML <br> and <p>

<p>Roses are red</p>

<p>Violets are blue</p>

<p>HTML is Fun</p>

<p>and so are You!</p>

<p>

Roses are red <br>

Violets are blue <br>

26
HTML is fun <br>

and so are You!

</p>

HTML pre Tag


The HTML Preformatted text tag, <pre>, is used to define a block of text to display them in the
same manner as it is written in the HTML file.

In HTML, we use the <pre> tag to create preformatted text. For example,

<pre>

This Text will

be shown exactly

as it is written.

</pre>

Font in HTML <pre> tag


By default, the HTML <pre> tag changes the font of its content to a monospaced font. A
monospace font is a font in which all the characters occupy the same space.

Code in HTML <pre> tag


The HTML <pre> tag is used to include code blocks in our HTML pages. For example,

27
<pre>

let inviteFunction = async (invite) => {

let response = await fetch("/invite", {

method: "POST",

headers: getHeaders(),

body: JSON.stringify(invite),

});

let data = await response.json();

if (response.ok) return data;

throw new Error(data);

</pre>

Here we can see that using the HTML <pre> tag is a great way to display code in our HTML
articles. It preserves the white spaces, making code more readable.

If we use a <p> tag, the output would appear as below.

<p>

let inviteFunction = async (invite) => {

let response = await fetch("/invite", {

method: "POST",

headers: getHeaders(),

body: JSON.stringify(invite),

});

let data = await response.json();

if (response.ok) return data;

28
throw new Error(data);

</p>

HTML Horizontal Line


The HTML Horizontal rule tag, <hr>, is used to insert a horizontal line between our paragraphs.
For example,

<p>First Paragraph</p>

<hr>

<p>Second Paragraph</p>

The <hr> tag is an empty tag, i.e. it doesn't require a closing tag.

HTML horizontal line to separate Page sections


The <hr> tag is used to apply a thematic break in HTML. i.e It is used when there is a change of
topic or you need to specify separation between content. Commonly, a <hr> tag is used between
sections in an article. For example,

<h2>Physics</h2>

<p>Physics is the natural science that studies matter, its fundamental constituents, its motion and
behavior through space and time, and the related entities of energy and force. </p>

<hr>

<h2>Chemistry</h2>

<p>Chemistry is the branch of science that deals with the properties, composition, and structure
of elements and compounds, how they can change, and the energy that is released or absorbed
when they change.</p>

29
30

You might also like