HTML BASIC
What is HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, is a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages
HTML Tags
HTML markup tags are usually called HTML tags
HTML tags are keywords surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
Start and end tags are also called opening tags and closing tags
HTML Documents = Web Pages
HTML documents describe web pages
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
HTML BASIC
With HTML you can create your own Web site.
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph
When you save an HTML file, you can use html file extension.
HTML tags are not case sensitive: <P> means the same as <p>.
HTML Elements
HTML Element Syntax
An HTML element starts with a start tag / opening tag
An HTML element ends with an end tag / closing tag
The element content is everything between the start and the end tag
Some HTML elements have empty content
Empty elements are closed in the start tag
Most HTML elements can have attributes
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break.
HTML Attributes
Attributes provide additional information about HTML elements.
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
Example
<a href="[Link] is a link</a>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Hyperlink and Images
HTML Links
HTML links are defined with the <a> tag.
Example
<a href="[Link] is a link</a>
HTML Images
HTML images are defined with the <img> tag.
Example
<img src="[Link]" width="104" height="142" />
HTML Text Formatting
<b> or <i> defines bold or italic text only.
This text is <b> big
This text is <i> italic
.
HTML Fonts
The <font> tag is
<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text
color.
</font>
</p>
HTML Style
Example - Background Color
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Tables
<table> tag.
A table is divided into rows (with the <tr> tag), and each row is divided into
data cells (with the <td> tag). td stands for "table data," and holds the content
of a data cell. A <td> tag can contain text, links, images, lists, forms, other
tables, etc.
<table border="1">
<tr>
<td>NAME</td>
<td>AGE/td>
</tr>
NAME AGE
<tr> SHYAM 25
<td>SHYAM</td>
<td>25</td>
</tr>
</table>
HTML Lists
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li>
[Link] list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:
• Coffee
• Milk
HTML Lists
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
How the HTML code above looks in a browser:
1. Coffee
2. Milk
HTML Forms and Input
HTML Forms
HTML forms are used to pass data to a server.
A form can contain input elements like text fields,
checkboxes, radio-buttons, submit buttons and
more. A form can also contain select lists,
textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form
<form>
.
input elements
.
</form>
HTML BASIC
Text Fields
<input type="text" /> defines a one-line
input field that a user can enter text into:
<form>
First name: <input type="text" name=“First Name"
/><br />
Last name: <input type="text" name=“Last Name"
/>
</form>
First name:
Last name:
HTML BASIC
Password Field
<input type="password" /> defines a password field:
<form>
Password: <input type="password" name="pwd" />
</form>
Password:
Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a user select
ONLY ONE of a limited number of choices:
<form>
<input type="radio" name=“gender" value="male"
/> Male<br />
<input type="radio" name=“gender" value="female"
/> Female
</form>
Male
Female
HTML BASIC
Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select
ONE or MORE options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle"
value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle"
value="Car" /> I have a car
</form>
I have a bike
I have a car
HTML BASIC
Submit Button
<input type="submit" /> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the
page specified in the form's action attribute. The file defined in the action
attribute usually does something with the received input:
<form name="input"
action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
Username: SUBMIT
HTML Frames
HTML Frames
With frames, you can display more than one HTML document in the same
browser window. Each HTML document is called a frame, and each frame is
independent of the others.
The HTML frameset Element
The frameset element holds one or more frame elements. Each frame
element can hold a separate document.
The frameset element states HOW MANY columns or rows there will be in
the frameset, and HOW MUCH percentage/pixels of space will occupy each
of them.
The HTML frame Element
The <frame> tag defines one particular window (frame) within a frameset.
HTML BASIC
The first column is set to 25% of the width of the browser window.
The second column is set to 75% of the width of the browser window.
The document "frame_a.htm" is put into the first column, and the
document "frame_b.htm" is put into the second column:
<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>