Scribd
Upload
10 views

Slide 02

The document discusses HTML tags and elements for formatting text, creating lists, inserting images, and constructing tables. It covers tags for headings, paragraphs, bold, italics, underlines, line breaks, ordered and unordered lists, image links, horizontal rules, and table elements.

Uploaded by

Taro Takahashi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
10 views

Slide 02

The document discusses HTML tags and elements for formatting text, creating lists, inserting images, and constructing tables. It covers tags for headings, paragraphs, bold, italics, underlines, line breaks, ordered and unordered lists, image links, horizontal rules, and table elements.

Uploaded by

Taro Takahashi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 17

Lesson01

Getting Started with HTML5, CSS3,


and Responsive Web Design

https://www.w3schools.com/
1. Basic introduction to tag command. (Selectors) and attributes
2. B, u, i, p, br...
3. Html List
4. Hr, Table, Link, img

http://fpt.edu.vn 04/02/24 2
1. Basic introduction to tag command. (Selectors) and attributes
•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>

http://fpt.edu.vn 04/02/24 3
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

http://fpt.edu.vn 04/02/24 4
2. List all tags in HTML
-<u> tag: Create an underline on the text
<u>This is some text in a paragraph.</u>

-<I> tag : Defines a paragraph of text formatted in italics


<i>This is some text in a paragraph.</i>

-<b> tag : Identify bold text


<b>This is some text in a paragraph.</b>

-<p> tag : Define a piece of text


<p>This is some text in a paragraph.</p>

-<br> tag: Insert a newline break

http://fpt.edu.vn 04/02/24 5
The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the most important heading. <h6> defines the least
important heading.

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

http://fpt.edu.vn 04/02/24 6
3. Html List
HTML lists allow web developers to group a set of related items in lists.
1. Unordered HTML List
•An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
•The list items will be marked with bullets (small black circles) by default:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

http://fpt.edu.vn 04/02/24 7
- Unordered HTML List - Choose List Item Marker
- The CSS list-style-type property is used to define the style of the list
item marker. It can have one of the following values:

http://fpt.edu.vn 04/02/24 8
2. Ordered HTML List
•An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
•The list items will be marked with numbers by default:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

http://fpt.edu.vn 04/02/24 9
- Ordered HTML List - The Type Attribute
- The type attribute of the <ol> tag, defines the type of the list item
marker:

http://fpt.edu.vn 04/02/24 10
3. HTML Description Lists
•HTML also supports description lists.
•A description list is a list of terms, with a description of each term.
•The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

http://fpt.edu.vn 04/02/24 11
4. Hr, Link, img, Table
•<hr> tag
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of
topic).
The <hr> element is most often displayed as a horizontal rule that is used
to separate content (or define a change) in an HTML page.
•<link> tag
The <link> tag defines the relationship between the current document and
an external resource.
The <link> tag is most often used to link to external style sheets or to add
a favicon to your website.
The <link> element is an empty element, it contains attributes only.

<link rel="stylesheet" href="styles.css">

http://fpt.edu.vn 04/02/24 12
• <img> tag
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as
attributes:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

- <table> tag
HTML tables allow web developers to arrange data into rows and columns.

http://fpt.edu.vn 04/02/24 13
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

http://fpt.edu.vn 04/02/24 14
How To Add a Border
•When you add a border to a table, you also add borders around each table
cell:

•HTML tables can have different sizes for each column, row or the entire
table.

http://fpt.edu.vn 04/02/24 15
HTML tables can have headers for each column or row, or for many
columns/rows.

HTML Table Padding & Spacing: HTML tables can adjust the padding inside
the cells, and also the space between the cells.

http://fpt.edu.vn 04/02/24 16
HTML tables can have cells that spans over multiple rows and/or columns.

HTML Table - Zebra Stripes

HTML Table Colgroup: If you want to style the two first columns of a table,
use the <colgroup> and <col> elements.

http://fpt.edu.vn 04/02/24 17

You might also like