Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
8 views

HTML2

it talks about HTML

Uploaded by

yuti6211
Copyright
© © All Rights Reserved
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
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