Scribd
Upload
12 views14 pages

HTML Basics for Web Design Beginners

This document provides an introduction to HTML and web design, covering the basic structure of HTML documents, including elements, attributes, and various tags used for formatting content. It explains the differences between web applications and desktop applications, and details the use of headings, paragraphs, images, tables, and forms in HTML. Additionally, it discusses attributes such as id, class, and style, as well as the importance of comments and proper formatting in HTML documents.

Uploaded by

Sujana Dinesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views14 pages

HTML Basics for Web Design Beginners

This document provides an introduction to HTML and web design, covering the basic structure of HTML documents, including elements, attributes, and various tags used for formatting content. It explains the differences between web applications and desktop applications, and details the use of headings, paragraphs, images, tables, and forms in HTML. Additionally, it discusses attributes such as id, class, and style, as well as the importance of comments and proper formatting in HTML documents.

Uploaded by

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

UNIT - I

HTML: Introduction to web designing, difference


between web applications and desktop applications,
introduction to HTML, HTML structure, elements,
attributes, headings, paragraphs, images, tables,
lists, blocks, symbols, embedding multi-media
components in HTML, HTML forms

Introduction to web designing: Web design is the


planning and creation of websites. This includes a number
of separate skills that all fall under the umbrella of web
design. introduction to HTML, HTML structure:
Some examples of these skills are information architecture,
user interface, site structure, navigation, layout, colors, HTML structure: All HTML documents follow the same
fonts, and overall imagery. basic structure. They have a head which contains control
information used by the browser and server and a large
Difference between web applications and desktop body. The body contains the content that displays on the
applications: Desktop application is a computer program screen and tags which control how that content is
that runs locally on a computer device (Eg: desktop or a formatted by the browser. The basic document is:
<html>
laptop). A web application needs an internet connection for
the device to run that application. Desktop apps are <head>
restricted by the hardware requirements of the device on <title>A Minimal HTML document</title>
which they run. A web application can be used by anyone </head>
who has access to the web browser. <body>
<h1>The Largest Heading</h1>
<p>A sample paragraph showing formatting and
followed by a line across the screen.</p>
<hr>
</body>
</html>
<html> tag: The <html> tag encloses all other HTML tags
and associated text within the document. It is an optional

1
tag. You can create an HTML document without this tag HTML provides over 90 different elements. These elements
and the web browser can still read it and display it. But it is fall into different categories. They are
always a good form to include the start and end html tags.
<head> tag: This tag comes after the HTML start tag. It
contains <title> tag to give the document title that 1. Top-level elements: html, head, and body.
displays on the browsers title bar at the top. The other tags 2. Head elements: elements placed inside head, including
that are used in the head are <style> and <link>. title (page title), style (rendering style), link (related
Example: <title>First Web Page</title> documents), meta (data about the document), base (URL of
<body> tag: The actual content of the webpage are placed document), and script (client-side scripting).
in the body section. The body tag contains all the text and
3. Block-level elements: elements behaving like
graphics which are to be displayed in the web page. The paragraphs, including h1|h6 (headings), p(paragraph), pre
tag consists of various attributes. They are bgcolor, link, (pre-formatted text), div (designated block), ul, ol, dl (lists),
alink, vlink, text. table(tabulation), and form (user input forms). When
displayed, a block-level (or simply block) element always
Example: <body bgcolor=”red” alink=”blue” starts a new line and any element immediately after the
vlink=”yellow”> block element will also begin on a new line.
The body tag uses various tags such as <h1>, <p> and
4. Inline elements: elements behaving like words,
<hr>. <h1> tag is used to display the heading in a larger characters, or phrases within a block, including a (anchor
font. <p> is used to write the text in a paragraph and or hyperlink), br (line break), img (picture or graphics), em
<hr> can be used to draw a horizontal line in the web (emphasis), strong (strong emphasis), sub (subscript), sup
page. (superscript), code (computer code), var (variable name),
kbd (text for user input), samp (sample output), span
HTML elements: An HTML file is made of HTML elements. (designated inline scope).
These elements are responsible for creating web pages and 5. When an element is placed inside another, the
define content in that webpage. An element in HTML containing element is the parent and the contained
usually consist of a start tag <tag name>, close tag </tag element is the child.
name> and content inserted between them. Thus an
6. Comments in an HTML page are given as <!-- a sample
element is a collection of start tag, attributes, end tag,
comment -->. Text and HTML elements inside a comment
content between them.
tag are ignored by browsers. Be sure not to put two
Some elements does not have end tag and content, these
consecutive dashes (--) inside a comment. It is good
elements are termed as empty elements or self-closing
practice to include comments in HTML pages as notes,
element or void elements.
reminders, or documentation to make maintenance easier.
Ex: <p> Welcome to HTML world!!! </p>
Ex: <hr>

2
7. In an HTML document certain characters, such as < and </body>
&, are used for markup and must be escaped to appear </html>
literally. Other characters you may need are not available Title: Title attribute is used to provide a title for the
on the keyboard. HTML provides entities (escape element. The title must be text-only, and it is shown in the
sequences) to introduce such characters into a Web page. web page when the cursor is placed on the element.
For example, the entity &lt; gives < and &divide; gives ¥. <!-- HTML Program to demonstrate usage of title
Attributes: HTML elements often have attributes. These attributes-->
attributes provide additional information about HTML <!DOCTYPE html>
elements. They affect the way that the element operates <html>
but they are optional. Attributes are always specified in the <head>
start tag. Attributes usually come in name/value pairs like: <title>The title Attribute Example</title>
name="value". HTML elements commonly use the </head>
following core attributes. They are <body>
1. Id <h1Title="myHeader">My Header</h1>
2. Tiitle <h1 >My Second Header</h1>
</body>
3. Style </html>
4. Class Style: Style attribute is used to provide presentation styles
Id: Id attribute is used to Uniquely identify the element in a for the individual element
page. All ids in a document must be distinct. <body style="background-color: cyan">
<! -- HTML Program to demonstrate usage of id attribute-- The above statement gives the color value cyan to the
> style property background-color for this element. Several
<html> style properties separated by semicolons (;) can be given.
<head> The style attribute is a direct but inflexible way to specify
<style> presentation style.
#myHeader { <!--Program to demo style attribute-->
background-color: lightblue; <html>
color: black; <head>
text-align: center; <title>style Attribute</title>
} </head>
</style> <body >
</head> <h1 style=" background-color: lightblue; color: black; text-
<body> align: center;
<h1 id="myHeader">My Header</h1> "> My Header </h1>
<h1 >My Second Header</h1> <h1 >My Second Header</h1>

3
</body> <head>
</html> <title >Href attribute </title>
Class: Class attribute is used to specify the style class for </head>
the element. Thus, HTML elements may use different <body>
classes and the specified presentation styles are applied to <a href="[Link] is first
elements belonging to the same class. Link</a>
<!--Program to demo class atribute--> </body>
<html> </html>
<head> src Attribute: src attribute is used to define file location. It
<link rel="stylesheet" href="[Link]"> accepts the URL of the resource. It is used with <img> ,
</head> <iframe>, <audio>, <video>, etc.
<body> <!--Program to demo src atribute in image tag-->
<h1 id="head1">This is a heading</h1> <html>
<h1 id ="head2">This is a paragraph.</h1> <head>
</body> <title >Href attribute </title>
</html> </head>
/*external style sheet named as [Link]*/ <body>
#head1 { <img src="[Link] width="200"
background-color: lightblue; height="200">
color: pink; </body>
text-align: center; </html>
} alt Attribute: The alt attribute is added as an alternate text
#head2 { in a <img> tag. It holds a description of the image.
background-color: lightgreen; The text provided in the alt attribute is shown when the
color: yellow; image is not loaded due to the unavailability of an image or
text-align: left; some error. It is not mandatory to
} use alt attributes but is incredibly useful for accessibility.
Other useful HTML attributes: Apart from core attributes, Screen readers read this to their users.
there are other useful attributes that are used with other <!--Program to demo alt atribute in image tag-->
HTML elements. <html>
href Attribute: The href attribute is used to link to another <head>
page or another web address. It is used in a tag. It provides <title >Href attribute </title>
a URL to the link. </head>
<!--Program to demo href atribute in anchor tag--> <body>
<html>

4
<img src="[Link] width="200" Whitespace in between words is treated as a single
height="200"> character, and whitespace at the start and end of elements
</body> and outside elements is ignored. So when we want to
</html> display the content in a structured way then <p> tag is
HTML offers six heading elements, h1 through h6, used.
for level-one to level-six section headings. Headings are <!-- HTML Program to demonstrate usage of paragraph
block elements and are usually displayed with a heavier element -->
font weight followed by a blank line. Use h1 for top-level <! DOCTYPE html>
section headings, and h2 for subsections within top-level <html>
sections, and so on. Unless otherwise specified, browsers <head>
use increasingly larger fonts to render higher level <title>Heading Tags</title>
headings. It is advisable to use h1 for the most prominent </head>
heading such as the headline of an article. <body>
<!-- HTML Program to demonstrate usage of six heading <p>This is the First Para</p>
elements --> <p>This is the Second Para</p>
<! DOCTYPE html> </body>
<html> </html>
<head> Images: The <img> tag is used to embed an image in an
<title>Heading Tags</title> HTML page. Images are not technically inserted into a web
</head> page; images are linked to web pages. The <img> tag
<body> creates a holding space for the referenced image. The
<h1>Heading One</h1> <img> tag has two required attributes. They are
<h2>Heading Two</h2> 1. src - Specifies the path to the image
<h3>Heading Three</h3> 2. alt - Specifies an alternate text for the image, if the
<h4>Heading Four</h4> image for some reason cannot be displayed
<h5>Heading Five</h5>
<h6>Heading Six</h6> <!--Program to demo image tag-->
</body> <html>
</html> <head>
Paragraphs: The <p> tag in HTML defines a paragraph. <title >Image </title>
These have both opening and closing tags. So anything </head>
mentioned within <p> and </p> is <body>
treated as a paragraph. Browsers automatically add a <img src="[Link]
single blank line before and after each <p> element. alt=”no image” width="200" height="200">

5
</body>
</html>
Tables: Tables display information in a clear and concise
fashion. The block element table organizes and presents
information in neatly aligned rows and columns. It is often
used to present tabular data.
Table Basics: A simple table simply has a number of rows,
each row containing the same number of columns. The <tr>
table is enclosed in between<table> and </table>. The <th>Rollno</th>
common tags used in table are <th>Name</th>
<caption> : The <caption> tag is optional. It is used to <th>Group</th>
display the heading for the table. </tr>
<th> : The <th> tag is used to display the heading for the <tr>
column or row. <td>101</td>
<tr> : The <tr> tag is used to write rows in the table. <td>Sai</td>
<td> : The <td> tag is used to write data in the cell. The <td>MPCS</td>
<td> tag is embedded in <tr> tag. </tr>
Table Formatting: The common attributes used in table are <tr>
Border: To specify the border for the table. Default value <td>102</td>
for the border is 0. It can have values such as 1, 2…. <td>Gita</td>
Cellspacing: Cellspacing specifies the space between cells <td>MSCS</td>
(i.e) it defines the whitespace between the edges of the </tr>
adjacent cells. It can have values such as 1, 2…. <tr>
Cellpadding: Cellpadding specifies the space between the <td>103</td>
border of a table cell and its contents (i.e) it defines the <td>Kiran</td>
whitespace between the cell edge and the content of the <td>MECS</td>
cell. It can have values such as 1, 2…. </tr>
<!-- Html Program to demo Table attributes --> </table>
<html> </body>
<head> <html>
<title>Table attributes</title> Table Positioning: A table is normally positioned left
</head> adjusted by itself on the page. To center a table
<body> horizontally on the page use the margin style properties
<table border="12" bordercolor="red" cellspacing="4" (Ex: CenteredTable):
cellpadding="8" >

6
<tr align="center" >
<table style="margin-left: auto; margin-right: auto"> <td style="width:10%">10%</td>
Table Width and Height: The width and height of a table is <td style="width:30%">20%</td>
automatically computed to accommodate the contents in <td style="width:40%">30%</td>
the table cells. The width of the table can be specified </tr>
using the width attribute of table. The attribute width="wd" </table>
speciifies the overall width of the table in pixels </body>
(width="400")or as a percentage (width="100%") of the <html>
available horizontal space. Use a percentage rather than a <!-- Html Program to demo Row Span -->
fixed length whenever possible. The height of the table can
be specified using the height attribute of table. The
attribute height="ht" speciifies the overall height of the
<html>
table in pixels or as a percentage of the available vertical
<head>
space. Use a percentage rather than a fixed length
<title>Row Span</title>
whenever possible.
</head>
Row and Column Spans: A table cell can span multiple rows
<body>
and/or columns. Use the rowspan attribute to specify the
<table border="2" width="60%" >
number of rows a table cell spans. Use the colspan
<caption> Row Span</caption>
attribute to specify the number of columns a table cell
<tr align="center" >
spans.
<td style="width:30%">20%</td>
<td rowspan = "2" style="width:10%">10%</td>
</tr>
<tr align="center" >
<!-- Html Program to demo Column Span --> <td style="width:40%">30%</td>
<html> </tr>
<head> </table>
<title>Column Span</title> </body>
</head> <html>
<body> Table Nesting: Placing one table within another table is
<table border="2" width="60%" > called table nesting.
<tr align="center" > <!-- Html Program to demo Table Nesting -->
<td colspan = "2" style="width:10%">10%</td> <html>
<td style="width:30%">20%</td> <head>
</tr> <title>Table Nesting</title>

7
</head> Lists: In addition to headings and paragraphs, lists can be
<body> used to organize and present information for easy reading.
<table border="2" bordercolor="green"> Three block-level list elements are available. They are
<tr> Bullet list: The ul element provides an unordered list where
<td>Table 1</td> the ordering of the items is unimportant. A ul is usually
presented as a set of bullet items.
Ordered list: The ol element offers an numbered list where
the ordering of the items is important. An ol is typically
displayed as a sequence of enumerated items.
Definition list: The dl element is handy for a definition list
where each term (<dt>) is given a definition or description.
<td> <!--Html Program to demo unordered, ordered and
<table border="2" bordercolor="blue"> definition lists-->
<tr> <html>
<td>Table 2</td> <head>
<td>Table 2</td> <title>Lists</title>
</tr> </head>
<tr> <body>
<td> Table 2 </td> <ul type="square">
<td>Table 2</td> <li>Fruits</li>
</tr> <li>Cereal</li>
</table> <li>Meats</li>
</td> </ul>
</tr> <ol type="I">
<tr> <li>Fruits</li>
<td> Table 1 </td> <li>Cereal</li>
<td> Table 1. </td> <li>Meats</li>
</tr> </ol>
</table> <dl>
</body> <dt>Fruits</dt> <dd>Mango is an example of fruit</dd>
<html> <dt>Cereal</dt> <dd>Cereals are example of
Pulses</dd>
</dl>
</body>
<html>

8
The style defined for h1 applies to all h1 elements in the
document. The h2 style is only applied when it is explicitly
called by using the below statement.
<h2 class="some">...</h2>
The .anyelement style can be applied wherever it is
needed:
<h2 class=anyelement>...</h2>
<p class=anyelement>...</p>
Symbols: Entities are used to display reserved characters
in HTML and symbols that are not present on the keyboard.
Some characters such as less than (<) or greater than (>)
signs are reserved in HTML. An HTML entity is a piece of
text ("string") that begins with an ampersand ( & ) and
Blocks: Styles can be used to change the appearance of ends with a semicolon ( ; ). If these symbols are in the text
individual elements but often want to change the way that then &lt; and &gt; are to be used. To display a less than
every instance of an element appears. A class is a sign (<) we can also use &#60;. A commonly used entity in
definition of a set of styles which can be applied as HTML is the non-breaking space is &nbsp;. This non-
required. Classes can be applied to a single type of breaking space is used to create a space between the
element, or may be anonymous and hence applicable to words in a line. Symbols that are not present on the
any element. The following code shows the difference keyboard can also be added by using entities. They are
between the two types: Sailaja --- 9348133355
h1 {
color: red;
border: thin groove;
}
[Link] {
color: green;
margin-left: 60%;
}
.anyelement {
text-align: right;
color: purple;
}

9
The text between the <video> and </video> tags will only
Embedding Multi-media Components in HTML: be displayed in browsers that do not support the <video>
Multimedia comes in many different formats. It can be element.
almost anything you can hear or see, like images, music, HTML Audio
sound, videos, records, films, animations, and more. <audio> Element
Web pages often contain multimedia elements of different To play an audio file in HTML, use the <audio> element:
types and formats Multimedia comes in many different <html>
formats. It can be almost anything. <body>
Multimedia Formats <audio controls>
Multimedia elements (like audio or video) are stored in <source src="[Link]" type="audio/ogg">
media files. <source src="horse.mp3" type="audio/mpeg">
The most common way to discover the type of a file, is to Your browser does not support the audio element.
look at the file extension. </audio>
Multimedia files have formats and different extensions like: </body>
.wav, .mp3, .mp4, .mpg, .wmv, and .avi. </html>
HTML Video HTML Plug-ins
The HTML <video> element is used to show a video on a Plug-ins are computer programs that extend the standard
web page. functionality of the browser.
<html> Plug-ins
<body> Plug-ins were designed to be used for many different
<video width="320" height="240" controls> purposes:
<source src="movie.mp4" type="video/mp4">  To run Java applets
<source src="[Link]" type="video/ogg">
 To run Microsoft ActiveX controls
Your browser does not support the video tag.
</video>  To display Flash movies
</body>
</html>  To display maps
The controls attribute adds video controls, like play, pause,  To scan for viruses
and volume. It is a good idea to always include width and
height attributes. If height and width are not set, the page  To verify a bank id
might flicker while the video loads.
The <source> element allows you to specify alternative HTML Forms:
video files which the browser may choose from. The This element is used to create a form on html page. Which
browser will use the first recognized format. is a logical grouping of controls available on the page. Form
contains controls such as text fields, email field, password

10
fields, checkboxes, button, radio buttons, submit button, <h2>The input Element</h2>
menus etc. <form action="/action_page.php">
Attribute of form tag <label for="fname">First name:</label><br>
 name: are used for provide a name to the form <input type="text" id="fname"
 action: are used for specify the page to which the data name="fname"><br><br>
of current page has to be submitted. <input type="submit" value="Submit">
 method: are used for specify which method to use for </form>
submitting this page to server (get or post). </body>
</html>
Form tag are used for get the information from user, for
example when you fill the registration form lot of <label> Element
information given by use and these information server get The <label> element defines a label for several form
from web page using form element. elements.
Syntax of form tag The <label> element is useful for screen-reader users,
Syntax because the screen-reader will read out loud the
<form> label when the user focus on the input element.
//input controls e.g. textfield, checkbox, button, radiobutton The <label> element also help users who have difficulty
</form> clicking on very small regions (such as radio
HTML Form Elements buttons or checkboxes) - because when the user clicks the
<option> text within the <label> element, it toggles
<optgroup> the radio button/checkbox.
The HTML <form> element can contain one or more of the The for attribute of the <label> tag should be equal to the
following form elements: id attribute of the <input> element to bind them together.
<input> ,<label> ,<select> ,<textarea> ,<button>,<field
set> <select> Element
<legend> ,<datalist> ,<output>,<option>,<optgroup> The <select> element defines a drop-down list:
The <option> elements defines an option that can be
<input> Element selected.
One of the most used form element is the <input> By default, the first item in the drop-down list is selected.
element. Visible Values:
The <input> element can be displayed in several ways, Use the size attribute to specify the number of visible
depending on the type attribute. values:
<html> Use the multiple attribute to allow the user to select more
<body> than one value:
<html>

11
<body> The <legend> element defines a caption for the <fieldset>
<h2>Allow Multiple Selections</h2> element.
<p>Use the multiple attribute to allow the user to select
more than one value.</p>
<form action="/action_page.php"> HTML Input Types :
<label for="cars">Choose a car:</label>  <input type="text">
<select id="cars" name="cars" size="4" multiple>  <input type="password">
<option value="volvo">Volvo</option>  <input type="button">
<option value="saab">Saab</option>  <input type="checkbox">
<option value="fiat">Fiat</option>  <input type="color">
<option value="audi">Audi</option>  <input type="date">
</select><br><br>  <input type="datetime-local">
<input type="submit">  <input type="email">
</form>  <input type="file">
<p>Hold down the Ctrl (windows) / Command (Mac) button  <input type="hidden">
to select multiple options.</p>  <input type="image">
</body>  <input type="month">
</html>  <input type="number">
 <input type="radio">
<textarea> Element  <input type="range">
The <textarea> element defines a multi-line input field (a  <input type="reset">
text area):  <input type="search">
The rows attribute specifies the visible number of lines in a  <input type="submit">
text area.  <input type="tel">
The cols attribute specifies the visible width of a text area.  <input type="time">
<button> Element  <input type="url">
The <button> element defines a clickable button:  <input type="week">

<button type="button" onclick="alert('Hello


World!')">Click Me!</button> Input Type Text :

<fieldset> and <legend> Elements <input type="text"> defines a single-line text input field:
The <fieldset> element is used to group related data in a <html>
form. <body>

12
<h2>Text field</h2> Checkboxes let a user select ZERO or MORE options of a
<form action="/action_page.php"> limited number of choices.
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br> Input Type Button
<label for="lname">Last name:</label><br> <input type="button"> defines a button:
<input type="text" id="lname"
name="lname"><br><br> Input Type Color
<input type="submit" value="Submit">
</form> The <input type="color"> is used for input fields that
</body> should contain a color.
</html>
Input Type Date
Input Type Password
The <input type="date"> is used for input fields that
<input type="password"> defines a password field: should contain a date.

Input Type Submit Input Type Email

<input type="submit"> defines a button for submitting The <input type="email"> is used for input fields that
form data to a form-handler. should contain an e-mail address.

Input Type Reset Input Type File

<input type="reset"> defines a reset button that will reset The <input type="file"> defines a file-select field and a
all form values to their default values: "Browse" button for file uploads.

Input Type Radio Input Type Search

<input type="radio"> defines a radio button. The <input type="search"> is used for search fields (a
search field behaves like a regular text field).
Input Type Checkbox
Input Type Tel
<input type="checkbox"> defines a checkbox.
The <input Input Type Tel

13
type="tel"> is used for input fields that should contain a maxlength Attribute
telephone number. The input maxlength attribute specifies the maximum
number of characters allowed in an input field.
Input Type Time min and max Attributes
The <input type="time"> allows the user to select a time The input min and max attributes specify the minimum and
(no time zone). maximum values for an input field.
The min and max attributes work with the following input
Input Attributes : types: number, range, date, datetime-local,
value Attribute month, time and week.
The input value attribute specifies an initial value for an pattern Attribute
input field: The input pattern attribute specifies a regular expression
readonly Attribute that the input field's value is checked against, when the
The input readonly attribute specifies that an input field is form is submitted.
read-only. The pattern attribute works with the following input types:
A read-only input field cannot be modified (however, a user text, date, search, url, tel, email, and password.
can tab to it, highlight it, and copy the text required Attribute
from it). The input required attribute specifies that an input field
The value of a read-only input field will be sent when must be filled out before submitting the form. rks with the
submitting the form! following input types: text, search, url
The required attribute wo, tel, email, password,date
disabled Attribute pickers, number, checkbox, radio, and file.
The input disabled attribute specifies that an input field autofocus Attribute
should be disabled. The input autofocus attribute specifies that an input field
A disabled input field is unusable and un-clickable. should automatically get focus when the page loads.
The value of a disabled input field will not be sent when
submitting the form!
size Attribute
The input size attribute specifies the visible width, in
characters, of an input field.
The default value for size is 20.

14

You might also like