Scribd
Upload
8 views

HTML2

it talks about HTML

Uploaded by

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

HTML2

it talks about HTML

Uploaded by

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

Create A Simple Markup Language

Document
Dream Science and Technology
Department of Web Development and Database
Administration

Compiled by:-
Bedru Y.

Jan,2024
Wollo, Ethiopia
Presentation Outline
 Introduction to Markup Language
 Creating Document Structure
 Validate Document
Markup Language

• Markup is information added to a document that


enhances its meaning in certain ways, in that it identifies
the parts and how they relate to each other.
• More specifically, a markup language is a set of symbols
that can be placed in the text of a document to
demarcate and label the parts of that document.
HTML

• HTML stands for Hypertext Markup Language


• HTML is the most widely used language to write Web
Pages.
• Hypertext refers to the way in which Web pages (HTML
documents) are linked together.
• Thus the link available on a webpage are called
Hypertext.
• As its name suggests, HTML is a Markup Language
which means you use HTML to simply "mark up" a text
document with tags that tell a Web browser how to
structure it to display.
HTML

• HTML (Hypertext Markup Language) is the language


used to create web documents.
• It defines the syntax and placement of special
instructions (tags) that aren’t displayed.
• It tells the browser how to display the document’s
contents.
• It is also used to create links to other documents, either
locally or over a network such as the Internet.
• In practice, the HTML “standard” is influenced heavily
by the tags that are introduced and supported by the
popular browsers.
Document Structure

• An HTML document contains text (the contents of the


page) with embedded tags, which provide
• Instructions for the structure, appearance, and
• Function of the contents .
• An HTML document is divided into two major portions:
the head and the body.
• The head contains information about the document, such
as its title and “meta” information describing the
contents.
• The body contains the actual contents of the document
(the part that is displayed in the browser window).
Document Structure

• The following example shows the tags that make up the


standard skeletal structure of an HTML document:
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
Contents of Document
</BODY>
</HTML>
HTML Tags

• As told earlier, HTML is a markup language and makes


use of various tags to format the content.
• Every HTML tag is made up of a tag name, sometimes
followed by an optional list of attributes, all of which
appears between angle brackets < >.
• Nothing within the brackets will be displayed in the
browser.
• The tag name is generally an abbreviation of the tag’s
function (this makes them fairly simple to learn).
• Attributes are properties that extend or refine the tag’s
function.
HTML Tags
HTML Tags

• The name and attributes within a tag are not case


sensitive.
• <BODY BGCOLOR=white> will work the same as <body
bgcolor=white>.
• However, values for particular attributes may be case
sensitive, particularly URLs and filenames.
• Most HTML tags are containers, meaning they have a
beginning (also called "opener” or “start”) tag and an
end tag.
• The text enclosed within the tags will follow the tag’s
instructions, as in the following example:
HTML Tags

• An end tag contains the same name as the start tag, but it is
preceded by a slash(/).
• End tags never contain attributes.
• For some tags, the end tag is optional and the browser
determines when the tag ends by context.
• This practice is most common with the <p> (paragraph)
tag.
• Browsers have supported the <p> tag without its end
tag
HTML Attributes

• Attributes are added within a tag to extend or modify the tag’s


actions.
• An attribute is used to define the characteristics of an HTML
element and is placed inside the element's opening tag.
• All attributes are made up of two parts: a name and a value:
• The name is the property you want to set. For example,
the paragraph <p> element in the example carries an
attribute whose name is align, which you can use to
indicate the alignment of paragraph on the page.
• The value is what you want the value of the property to
be set and always put within quotations. The below
example shows three possible values of align attribute:
HTML Attributes

• You can add multiple attributes within a single tag.


• Their order of appearance is not important.
• Attribute names and attribute values are case-insensitive.
Core Attributes

• The four core attributes that can be used on the majority


of HTML elements (although not all) are:
• id
• title
• class
• style
• The id Attribute
• The id attribute of an HTML tag can be used to
uniquely identify any element within an HTML page.
• There are two primary reasons that you might want
to use an id attribute on an element:
Core Attributes

• If an element carries an id attribute as a unique


identifier it is possible to identify just that element and
its content.
• If you have two elements of the same name within a
Web page (or style sheet), you can use the id attribute
to distinguish between elements that have the same
name.
Core Attributes

• The title Attribute


• It gives a suggested title for the element.
• They syntax for the title attribute is similar as explained
for id attribute:
• The behavior of this attribute will depend upon the
element that carries it, although it is often displayed as
a tooltip when cursor comes over the element or while
the element is loading.

• Now try to bring your cursor over "Titled Heading Tag


Example" and you will see that whatever title you used in your
Core Attributes

• The class Attribute


• The class attribute is used to associate an element with
a style sheet, and specifies the class of element.
• You will learn more about the use of the class attribute
when you will learn Cascading Style Sheet (CSS). So for
now you can avoid it.
• The value of the attribute may also be a space-
separated list of class names. For example:
Core Attributes

• The style Attribute


• The style attribute allows you to specify Cascading Style
Sheet (CSS) rules within the element.
Tags and its Usages

Tags Usages
Anything that appears within <b>...</b>
<b>...</ element, is displayed in bold
b>
<i>...</ Anything that appears within <i>...</i>
i> element is displayed in italicized
<u>...</ Anything that appears within <u>...</u>
u> element, is displayed with underline
<strike> Anything that appears within
...</ <strike>...</strike> element is displayed
strike> with strikethrough
<sup>... The content of
</sup> a <sup>...</sup> element is written in
Grouping Content

• The <div> and <span> elements allow you to group


together several elements to create sections or
subsections of a page.
• For example, you might want to put all of the footnotes
on a page within a <div> element to indicate that all of
the elements within that <div> element relate to the
footnotes.
• You might then attach a style to this <div> element so
that they appear using a special set of style rules.
Grouping Content
Grouping Content

• The <span> element, on the other hand, can be used to


group inline elements only.
• So, if you have a part of a sentence or paragraph which
you want to group together, you could use the <span>
element as follows
• <p>This is the example of <span
style="color:green">span tag</span> and the <span
style="color:red">div tag</span> alongwith CSS</p>
HTML Comments

• It is a good practice to add comments into your HTML


code, especially in complex documents, to indicate
sections of a document, and any other notes to
anyone looking at the code.
• Comments help you and others understand your code
and increases code readability.
• HTML comments are placed in between <!-- ... --> tags.
• So any content placed with-in <!-- ... --> tags will be
treated as comment and will be completely ignored by
the browser.
• There are few browsers that support <comment> tag to
HTML Comments
HTML Images

• Images are very important to beautify as well as to


depict many complex concepts in simple way on your
web page.
• Insert Image
• You can insert any image in your web page by using
<img> tag. Following is the simple syntax to use this
tag.

• The <img> tag is an empty tag, which means that it


can contain only list of attributes and it has no closing
tag
HTML Images

• You can set image width and height based on your


requirement using width and height attributes.
• You can specify width and height of the image in terms
of either pixels or percentage of its actual size.
HTML Images

• Set Image Border


• By default image will have a border around it, you can
specify border thickness in terms of pixels using border
attribute.
• A thickness of 0 means, no border around the picture.
HTML Images

• Set Image Alignment


• By default image will align at the left side of the
page, but you can use align attribute to set it in
the center or right..
HTML Tables

• The HTML tables allow web authors to arrange data like


text, images, links, other tables, etc. into rows and
columns of cells.
• The HTML tables are created using the <table> tag in
which the <tr> tag is used to create table rows and
<td> tag is used to create data cells.
HTML Tables
HTML Tables

• Table Heading
• Table heading can be defined using <th> tag.
• This tag will be put to replace <td> tag, which is used
to represent actual data cell.
• Normally you will put your top row as table heading as
shown below, otherwise you can use <th> element in
any row..
HTML Tables
HTML Tables

• Cellpadding and Cellspacing Attributes


• There are two attribiutes called Cellpadding and
Cellspacing which you will use to adjust the white
space in your table cells.
• The cellspacing attribute defines the width of the
border, while
• cellpadding represents the distance between cell
borders and the content within a cell.
HTML Tables
HTML Tables

• Colspan and Rowspan Attributes


• You will use colspan attribute if you want to merge two
or more columns into a single column.
• Similar way you will use rowspan if you want to merge
two or more rows.
HTML Tables

• Tables Backgrounds
• You can set table background using one of the following
two ways:
• bgcolor attribute - You can set background
color for whole table or just for one cell.
• background attribute - You can set
background image for whole table or just for one
cell.
• You can also set border color also using bordercolor
attribute.
HTML Tables

• Tables Backgrounds
• You can set table background using one of the following
two ways:
• bgcolor attribute - You can set background
color for whole table or just for one cell.
• background attribute - You can set
background image for whole table or just for one
cell.
• You can also set border color also using bordercolor
attribute.
HTML Tables

• Tables Backgrounds
HTML Tables

• Table Height and Width


• You can set a table width and height using width
and height attributes.
• You can specify table width or height in terms of
pixels or in terms of percentage of available screen
area.
HTML Tables

• Table Caption
• The caption tag will serve as a title or explanation
for the table and it shows up at the top of the

table.
HTML Lists

• HTML offers web authors three ways for


specifying lists of information. All lists must
contain one or more list elements. Lists may
contain:
• <ul> - An unordered list. This will list items
using plain bullets.
• <ol> - An ordered list. This will use different
schemes of numbers to list your items.
• <dl> - A definition list. This arranges your items
in the same way as they are arranged in a
dictionary.
HTML Lists

• HTML Unordered Lists


• An unordered list is a collection of related items
that have no special order or sequence.
• This list is created by using HTML <ul> tag. Each
item in the list is marked with a bullet.
HTML Lists

• HTML Unordered Lists- type Attribute


• You can use type attribute for <ul> tag to specify
the type of bullet you like.
• By default it is a disc.
• Following are the possible options.
HTML Lists

• HTML Unordered Lists- type Attribute


• Following is an example where we used <ul
type="square">
HTML Lists

• HTML Ordered Lists


• If you are required to put your items in a
numbered list instead of bulleted then HTML
ordered list will be used.
• This list is created by using <ol> tag.
• The numbering starts at one and is incremented
by one for each successive ordered list element
tagged with <li>.
HTML Lists

• HTML Ordered Lists-The type Attribute


• You can use type attribute for <ol> tag to specify
the type of numbering you like.
• By default it is a number.
• Following are the possible options

• The code generates:


HTML Lists

• HTML Ordered Lists-The start Attribute


• You can use start attribute for <ol> tag to specify
the starting point of numbering you need.
HTML Lists

• HTML Definition Lists


• HTML and XHTML support a list style which is
called definition lists where entries are listed like in
a dictionary or encyclopedia.
• The definition list is the ideal way to present a
glossary, list of terms, or other name/value list.
• Definition List makes use of following three tags.
• <dl> - Defines the start of the list
• <dt> - A term
• <dd> - Term definition
• </dl> - Defines the end of the list.
HTML Lists

• HTML Definition Lists


.
HTML Text Links
• A webpage can contain various links that take you
directly to other pages and even specific parts of a given
page.
• These links are known as hyperlinks.
• Hyperlinks allow visitors to navigate between Web sites
by clicking on words, phrases, and images.
• Thus you can create hyperlinks using text or images
available on a webpage.
HTML Text Links
• Linking Documents
• A link is specified using HTML tag <a>.
• tag is called anchor tag
• anything between the opening <a> tag and the closing </a>
tag becomes part of the link
• a user can click that part to reach to the linked document.
Following is the simple syntax to use <a> tag.
HTML Text Links
• Linking Documents
• Example: Let's try following example which links
http://www.tutorialspoint.com at your page:

• It generate
HTML Text Links
• The target Attributes
• We have used target attribute in our previous
example.
• This attribute is used to specify the location where
linked document is opened. Following are possible
options:
HTML Text Links
• The target Attributes
• Try following example to understand basic
difference in few options given for target attribute.
HTML Text Links
• Setting Link Colors
• You can set colors of your links, active links and
visited links using link, alink and vlink attributes
of <body> tag.
HTML Text Links
• Download Links
• You can create text link to make your PDF, or DOC
or ZIP files downloadable.
• This is very simple, you just need to give complete
URL of the downloadable file as follows:
HTML Image Links
• We have seen how to create hypertext link using text
and we also learnt how to use images in our webpages.
• Now we will learn how to use images to create
hyperlinks.
• It's simple to use an image as hyperlink. We just need to
use an image inside hyperlink at the place of text as
shown below
HTML Forms
• HTML Forms are required when you want to collect some
data from the site visitor.
• For example during user registration you would like to
collect information such as name, email address, credit
card, etc.
• There are various form elements available like
text fields, textarea fields, drop-down menus,
radio buttons, checkboxes, etc
HTML Forms
HTML Forms
HTML Forms

• Text Input controls


• There are three types of text input used on forms:
• Single-line text input controls - This control is
used for items that require only one line of user input,
such as search boxes or names. They are created
using HTML <input> tag.
HTML Forms

• Text Input controls


• Password input controls - This is also a single-
line text input but it masks the character as soon
as a user enters it.
• They are also created using HTML <input> tag but
type attribute is set to password.
HTML Forms

• Text Input controls


• Password input controls –.
HTML Forms

• Text Input controls


• Multi-line text input controls - This is used when
the user is required to give details that may be longer
than a single sentence. Multi-line input controls
are created using HTML <textarea> tag.
HTML Forms

• Text Input controls


• Multi-line text input controls –
HTML Forms

• Checkbox Control
• Checkboxes are used when more than one option is
required to be selected.
• They are also created using HTML <input> tag but
type attribute is set to checkbox.
HTML Forms

• Checkbox Control
HTML Forms

• Radio Button Control


• Radio buttons are used when out of many options,
just one option is required to be selected.
• They are also created using HTML <input> tag but
type attribute is set to radio.
HTML Forms

• Select Box Control


• A select box, also called drop down box which
provides option to list down various options in the
form of drop down list, from where a user can
select one or more options.
HTML Forms

• Select Box Control


HTML Forms

• File Upload Box


• If you want to allow a user to upload a file to your web
site, you will need to use a file upload box, also known
as a file select box.
• This is also created using the <input> element but type

attribute is set to file.


HTML Forms

• Button Controls
• There are various ways in HTML to create clickable
buttons.
• You can also create a clickable button using <input>
tag by setting its type attribute to button.
• The type attribute can take the following values:
HTML Forms

• Button Controls

You might also like