Scribd
Upload
3 views

Lecture 2ABC

HTML basics

Uploaded by

prithviraj182002
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Lecture 2ABC

HTML basics

Uploaded by

prithviraj182002
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 43

Agenda

• HTML5
• P, pre
• Lists, color, style
• Hyperlink
• Absolute vs relative
paths
• Block vs inline
elements
• Tables
• Forms

2
HTML - Fundamentals
<html>
<head>
</head>
<body>
<p align="center">
<font face="Arial" color="red" size="3">
<h1>Mike Tyler</h1>
PO Box 190387<br>
Hungry Horse, Mt 59919<br></font>
<img src="file:///c:/mike.jpg"/>
</p>
</body>
<html>
Output
3
HTML - Fundamentals
<html>
<head>
</head>
<body>
<p align="center">
<font face="Arial" color="red" size="3">
<h1>Mike Tyler</h1>
PO Box 190387<br>
Hungry Horse, Mt 59919<br></font>
<img src="file:///c:/mike.jpg"/><br>
<a href=“biopage.html”>Read my Bio</a>
</p>
</body>
<html>
4
HTML -
Fundamentals
Output

5
HTML – Paragraph vs Preformatted Text
<html> <html>
<head> </head> <head> </head>
<body> <body>
<p> <pre>
My Bonnie lies over the ocean. My Bonnie lies over the ocean.

My Bonnie lies over the sea. My Bonnie lies over the sea.

My Bonnie lies over the ocean. My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me. Oh, bring back my Bonnie to me.
</p> </pre>
</body> </body>
<html> <html>

6
HTML – Paragraph vs Preformatted Text
<html> <html>
<pre>: fixed-width font (usually
<head> </head> <head> </head>
Courier), and it preserves both spaces
<body> and line breaks
<body>
<p> <pre>
My Bonnie lies over the ocean. My Bonnie lies over the ocean.

My Bonnie lies over the sea. My Bonnie lies over the sea.

My Bonnie lies over the ocean. My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me. Oh, bring back my Bonnie to me.
</p> </pre>
</body> </body>
<html> <html>

7
HTML – Fundamentals: Lists

Unordered list Ordered list

<ul type=‘disc’> <ol type=“i” start=“2”>


<li>apples</li> <li>apples</li>
<li>bananas</li> <li>bananas</li>
<li>grapes</li> <li>grapes</li>
<li>strawberries</li> <li>strawberries</li>
</ul> </ol>

8
HTML – Fundamentals
Lists
Unordered list Ordered list

• apples II. apples


• bananas III. bananas
• grapes IV. grapes
• strawberries V. strawberries

What is Definition List?

9
HTML – Fundamentals: Heading

• Renders text as a heading, the rendering depending on the


level of heading selected.

<h1>Heading 1 level text</h1>


<h2>Heading 2 level text</h2>
<h3>Heading 3 level text</h3>
<h4>Heading 4 level text</h4>
<h5>Heading 5 level text</h5>
<h6>Heading 6 level text</h6>

10
HTML – Fundamentals: Horizontal
Lines and Comments

• Horizontal Line
• The <hr /> tag is used to create an horizontal rule (line).
<p>This is a paragraph</p>
<hr/>

• Comments
• Comments are ignored by the browser and are not displayed.
• Make the code readable and understandable
<!-- This is a comment -->

11
Entity
Character Description
Name
space &nbsp;
< less than &lt; Handling
Special
> greater than &gt; Characters
& ampersand &amp;
quotation
" &quot;
mark

12
HTML – Fundamentals: Colors
color = “red” Color HEX RGB
#000000 rgb(0,0,0)
color = “#FF0000”
#FF0000 rgb(255,0,0)
Hexadecimal values: 00 to FF #00FF00 rgb(0,255,0)
0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f #0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#FF FF FF #C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)

Red Blue

Green
13
HTML – Fundamentals: Style
Attribute

• Purpose: To provide a common way to style all HTML elements


• It’s an HTML Global Attribute
• Style attribute can be added to any HTML elements
• HTML Style Examples
• style="background-color : yellow"
• style="font-size:10px"
• style="font-family : Times"
• style="text-align : center"

14
HTML – Fundamentals: Style

<html>
<body style="background-color : PowderBlue;">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana; color:red">
This text is in Verdana and red
</p>
<p style="font-family:times; color:green">
This text is in Times and green
</p>
<p style="font-size:30px">This text is 30 pixels high</p>
</body>
</html>

15
HTML –
Fundamentals: Style

<html>
<body style="background-color : PowderBlue;">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana; color:red">
This text is in Verdana and red
</p>
<p style="font-family:times; color:green">
This text is in Times and green
</p>
<p style="font-size:30px">This text is 30 pixels
high</p>
</body>
</html>

16
Hyperlinks: Essence of Hypertext

• HTML links are hyperlinks

• You can click on a link and jump to another


document.

• When you move the mouse over a link, the mouse


arrow will turn into a little hand.

• Anchor Tag
<a href="url">link text</a>
17
More about Hyperlinks

<a href="https://www.w3schools.com/">Visit
<a>

• By default, links will appear as follows in all


browsers:

• An unvisited link is underlined and blue

• A visited link is underlined and purple

• An active link is underlined and red

18
Hyperlinks - The
Target Attribute
• The target attribute specifies where
to open the linked document.

• The target attribute can have one of


the following values:
• _self - Default. Opens the
document in the same
window/tab as it was clicked
• _blank - Opens the document in
a new window or tab
• _parent - Opens the document in
the parent frame
• _top - Opens the document in
the full body of the window

19
More about
Hyperlinks

• Absolute Paths (not recommended)


• <a href=“e:/myWeb/html/intro.html”>

• Relative Paths (recommended)


• Same directory: <a href=“file.html”>
• Parent directory: <a href=“../file.html>

• Target Attribute
• <a href=“url” target=“_blank”>…</a>

20
More about Hyperlinks

21
Block vs Inline Elements
• A block-level element • An inline element does
always starts on a new line,
and the browsers not start on a new line.
automatically add some
space (a margin) before and
after the element. • An inline element only
takes up as much width as
• A block-level element always necessary.
takes up the full width
available (stretches out to
the left and right as far as it
can). • This is a <span> element
inside a paragraph.
• Two commonly used block
elements are: <p> and <div>.
22
Block vs Inline Elements – Examples
• Block-level elements

• Inline elements

23
HTML Tables
Tables

25
Table Attributes

• BORDER=value

• ALIGN=left | right | center

• CELLSPACING=value

• CELLPADDING=value

• WIDTH=value|percent

26
Table Attributes
<TABLE BORDER=1 WIDTH=“50%" CELLPADDING=“6” CELLSPACING=“2”
ALIGN="RIGHT">
<CAPTION ALIGN="bottom">Class Grades</CAPTION>
<TR>
<TH>Student</TH>
<TH>Grade</TH>
</TR>
<TR>
<TD>Tom</TD>
<TD>B+</TD>
</TR>
<TR>
<TD>Sue</TD>
<TD>A-</TD>
</TR>
</TABLE>
27
Tables: Rowspan vs Colspan
28
Table:
Rowspan vs
Colspan

29
Hands-on

30
HTML Forms
What are Forms?
• An HTML form is used to collect user input
and send it to the server for processing

• A form is a placeholder that contains form


elements

<form parameters> ...form


elements... </form>

• Form elements include: buttons,


checkboxes, text fields, radio buttons,
drop-down menus, etc.

• A form usually contains a Submit


button to send the information in the
form elements to the server
The <form> element

• The <form attributes> ... </form> tag


encloses form elements

• The attributes of form specify what to do


with the user input

1. action=“url” (required)
• Specifies where to send the data
when the Submit button is clicked

2. method=“GET" (default)
• Specifies how to submit the data
e.g. through GET or POST
The Action Attribute
• The action attribute defines the action to be performed when the form is
submitted.
• Usually, the form data is sent to a file on the server when the user clicks on the
submit button.

34
<html>
<body>
<form name="form1" action="next.html"
method="get">
The Method name:<input type ="text" id="name" name="name">
<input type="submit" value="next" >
Attribute </form>
</body>
</html>

35
Method = GET or POST

• GET is used to request data from a


specified resource.
• Note that the query string
(name/value pairs) is sent in the URL
of a GET request:

• POST is used to send data to a server


to create/update a resource.
• The data sent to the server with POST
is stored in the request body of the
HTTP request:

36
Method = GET vs POST
• The HTML <input> element is the most
used form element.
The <input> • An <input> element can be displayed in
Element many ways, depending on
the type attribute

38
Text Fields

39
Radio Buttons

40
Checkboxes

41
The <select> Element
• The <select> element defines a drop-down list:
• The <option> elements defines an option that can be
selected.
• By default, the first item in the drop-down list is selected.

42
The <textarea> Element
• The <textarea> element defines a multi-line input field (a text area):
• The rows attribute specifies the visible number of lines in a text area.
• The cols attribute specifies the visible width of a text area.

43
Further Reading

• W3Schools is a good and widely used resource to learn HTML

• https://www.w3schools.com/html/html_tables.asp

• https://www.w3schools.com/html/html_styles.asp

• https://www.w3schools.com/html/html_lists.asp

• https://www.w3schools.com/html/html_forms.asp

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy