Introduction to HTML
1
How Website Works?
Website layers
Behavior (JS)
Presentation (CSS)
Content (HTML)
3
We’ll Study
HTML Basics (http://www.w3schools.com/html/html_intro.asp
): • HTML Elements • HTML Anchor
• HTML Headings • HTML Table
• HTML Paragraphs • HTML Division
• HTML Lists • HTML Form
• HTML Images • HTML Iframe
• HTML Links • HTML Multimedia
4
What is HTML?
• HTML(Hypertext Markup Language) is the standard markup
language for documents designed to be displayed in a web
browser. It defines the content and structure of web content.
• Using HTML, you can create a Web page with text, graphics,
sound, and video
5
HTML: HyperText Markup Language
HTML documents are simply text documents with a
specific form
• Documents comprised of content and markup tags
• Content: actual information being conveyed
• The markup tags tell the Web browser how to display the
page
• An HTML file must have an html file extension
• An HTML file can be created using a simple text editor ( Ex.6
Our First Example
• If you are running Windows, start Notepad
• Type in the following:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage.
</body>
</html>
• Open this file using a browser, and you will see…
7
HTML Document Structure
• Entire document enclosed within <html> and </html> tags
• Two subparts:
• Head
• Enclosed within <head> and </head>
• Within the head, more tags can be used to specify title of the page, meta-information,
link, etc.
• Body
• Enclosed within <body> and </body>
• Within the body, content is to be displayed
• Other tags can be embedded in the body
8
HTML Document Structure
9
HTML Document Structure
10
HTML Document Structure
11
HTML Tags
HTML tags are used to mark-up HTML elements
• Surrounded by angle brackets < and >
• HTML tags normally come in pairs, like <tagname> (start tag) and
</tagname> (end tag)
• The opening and closing tags use the same command except the closing
tag contains and additional forward slash /
• The text between the start and end tags is the element content
• Not case-sensitive (Follow the latest web standards: Use lowercase tags)
12
HTML Tags
• Nested Tags: Whenever you have HTML tags within other
HTML tags, you must close the nearest tag first
• Example: <h1> <i> The Nation </i> </h1>
13
The <title> Tag
• Choose the title of your Web page carefully; The title of a Web
page determines its ranking in certain search engines
• The title will also appear on Favorite lists, History lists, and
Bookmark lists to identify your page
14
Text Formatting
• Manipulating text in HTML can be tricky; Oftentimes, what you
see is NOT what you get
• For instance, special HTML tags are needed to create
paragraphs, move to the next line, and create headings
• <b> Bold Face </b>
• <i> Italics </i>
• <u> Underline </u>
• <p> New Paragraph </p>
• <br> Next Line
15
Headings
• Web pages are typically organized into sections with headings;
To create a heading use the expression <hn>….</hn> where
n is a number between 1 and 7
• In this case, the 1 corresponds to the largest size heading
while the 7 corresponds to the smallest size
16
Headings <hn> </hn>
<html>
<head>
<title> Example Page</title>
</head>
<body>
<h1> Heading 1 </h1>
Heading 1
<h2> Heading 2 </h2> Heading 2
<h3> Heading 3 </h3>
<h4> Heading 4 </h4> Heading 3
<h5> Heading 5 </h5> Heading 4
<h6> Heading 6 </h6> Heading 5
</body> Heading 6
</html>
17
Paragraphs
• Paragraphs allow you to add text to a document in such a way
that it will automatically adjust the end of line to suite the
window size of the browser in which it is being displayed. Each
line of text will stretch the entire length of the window.
• To create a heading use the expression <p>….</p>
18
Paragraphs, <p> </p>
<html><head>
<title> Example Page</title>
</head> Heading 1
<body></h1> heading 1 </h1> Paragraph 1,….
<p> Paragraph 1, ….</p>
<h2> Heading 2 </h2> Heading 2
<p> Paragraph 2, ….</p> Paragraph 2,….
<h3> Heading 3 </h3> Heading 3
<p> Paragraph 3, ….</p>
Paragraph 3,….
<h4> Heading 4 </h4>
<p> Paragraph 4, ….</p> Heading 4
<h5> Heading 5 </h5> Paragraph 4,….
<p> Paragraph 5, ….</p> Heading 5
<h6> Heading 6</h6> Paragraph 5,….
<p> Paragraph 6, ….</p> Heading 6
</body></html> Paragraph 6,….
19
Comment Statements
• Comment statements are notes in the HTML code that explain
the important features of the code
• The comments do not appear on the Web page itself but are a
useful reference to the author of the page and other
programmers
• To create a comment statement use the <!-- …….. --> tags
20
Ordered Lists
• Ordered lists are a list of numbered items.
• To create an ordered list, type:
Here’s how it
<ol> would look on the
<li> This is step one. </li> Web:
<li> This is step two. </li>
<li> This is step three. </li>
</ol>
Self Study : type
21
Unordered Lists
• An unordered list is a list of bulleted items
• To create an unordered list, type: Here’s how it
<ul> would look on the
Web:
<li> First item in list </li>
<li> Second item in list </li>
<li> Third item in list </li>
</ul>
• Self Study : list-style-type
22
Inserting Images
• Type <img src = “image.ext”> where image.ext indicates the
location of the image file
• The width=n and height=n attributes can be used to adjust
the size of an image
• The attribute border=n can be used to add a border n pixels
thick around the image
• Self Study : alt
23
Inserting Images
24
Links
• A link lets you move from one page to another, play videos and
sound, send email, download files, and more….
• A link has three parts: a destination, a label, and a target
• To create a link type : <a href=“page.html”> label </a>
• In the above link, “page.html” is the destination. The destination
specifies the address of the Web page or file the user will access
when he/she clicks on the link.
• The label is the text that will appear underlined or highlighted on
the page
25
Example: Links
• To create a link to CNN, I would type:
<a href=“http://www.cnn.com”>CNN</a>
• To create a link to NSTU, I would type:
<a href=“https://www.nstu.edu.bd/”>NSTU</a>
26
Anchors
• Anchors enable a user to jump to a
specific place on a Web site
• To create an anchor, type <a
href=“#anchor name”>label</a> at
the point in the text where you want
the link to appear
27
Tables
• The <table></table> element has four sub-elements:
• Table Row <tr></tr>
• Table Header <th></th>
• Table Data <td></td>
• Caption <caption></caption>
• The table row elements usually contain table header
elements or table data elements.
28
Tables
<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr> Column 1 Header Column 2 Header
<tr>
<td> Row1, Col1 </td>
<td> Row1, Col2 </td> Row1, Col1 Row1, Col2
</tr>
<tr> Row2, Col1 Row2, Col2
<td> Row2, Col1 </td>
<td> Row2, Col2 </td>
</tr>
</table>
29
Tables Attributes
Self Study
• BGColor
• Width
• Border
• CellSpacing
• CellPadding
• Align
• Background
• More…. 30
Forms
• An HTML form is an area of the document that allows users to enter
information into fields.
• A form may be used to collect personal information, opinions in polls,
user preferences and other kinds of information.
• There are two basic components of a Web form: the shell, the part that
the user fills out, and the script which processes the information
• HTML tags are used to create the form shell. Using HTML you can create
text boxes, radio buttons, checkboxes, drop-down menus, and more...
31
Forms
Text Box
Drop-down Menu
Radio Buttons
Checkboxes
Text Area
Reset Button
Submit Button 32
Forms
• The HTML <form> element is used to create an HTML
form for user input.
• The HTML <input> element is the most used form
element. An <input> element can be displayed in many
ways, depending on the type attribute.
• The <label> tag defines a label for many form elements.
33
Forms
34
Creating Text Boxes
• To create a text box, type <input type=“text” name=“name”
value=“value” size=n maxlength=n>
• The name, value, size, and maxlength attributes are optional
• The name attribute is used to identify the text box to the processing script
• The value attribute is used to specify the text that will initially appear in the
text box
• The size attribute is used to define the size of the box in characters
• The maxlength attribute is used to define the maximum number of characters
that can be typed in the box
35
Creating Text Boxes
• First Name: <input type="text" name="FirstName"
value="First Name" size=20><br><br>
• Last Name: <input type="text" name="LastName"
value="Last Name" size=20><br><br>
• Here’s how it would look on the
Web:
36
Creating Other Fields
• Radio Buttons
• Checkboxes
• Checkboxes
• Drop-down Menus
• Submit Button
• Reset Button
37
HTML Iframes
• The HTML <iframe> tag specifies an inline frame. An
inline frame is used to embed another document within
the current HTML document.
• An HTML iframe is used to display a web page within a
web page.
<iframe src="url" ></iframe>
38
HTML Iframes
39
Targets
• There are 4 special target names that cannot be assigned by
the NAME attribute of the FRAME tag.
• TARGET=“_top”
• TARGET=“_blank”
• TARGET=“_self”
• TARGET=“_parent”
40
Targets
41
Multimedia
• Multimedia comes in many different formats. It can be almost
anything you can hear or see, like images, music, sound,
videos, records, films, animations, and more.
• Web pages often contain multimedia elements of different
types and formats.
• Multimedia files have formats and different extensions
like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
42
Video
• To show a video in HTML, use the <video> element
• The <source> element allows you to specify alternative video files
which the browser may choose from. The browser will use the first
recognized format.
• The controls attribute adds video controls, like play, pause, and volume.
• It is a good idea to always include width and height attributes. If height
and width are not set, the page might flicker while the video loads.
• The text between the <video> and </video> tags will only be
displayed in browsers that do not support the <video> element.
43
Multimedia
44
Multimedia
• HTML <audio> Element
• The autoplay attribute
• The muted attribute
45
The <div> tag
div id=“header”
div id=“content”
div id=“footer”
46
The <div> tag
• The <div> tag is nothing more than a container unit that
encapsulates other page elements and divides the HTML document
into sections.
• Web developers use <div> elements to group together HTML
elements and apply CSS styles to many elements at once.
• For instance, by wrapping a set of paragraph elements into a <div>
element, we can take advantage of CSS styles and apply a font to all
paragraphs at once by applying a font style to the <div> tag instead
of coding the same style for each paragraph element.
47
The <div> tag
48
Assignment (Id Card)
49
Assignment (Portfolio)
50
Thank You
51
