Scribd
Upload
6 views

Html5.o CSS

Uploaded by

preymannxx11
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

Html5.o CSS

Uploaded by

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

HTML 5.

Hyper Text Markup Language


HTML 5.0

INTERNET
A website is a series of files that display in a public network called the Internet.
The files of a website share a computer location and are accessed by other
computers on that big network.

A website resides in a computer named a server. It is that computer that is


connected to the Internet.

An HTML document should contain an element referred to as the root. The


name of that element is html (or HTML). Therefore the primary code of a web
document is:

<html></html>
HTML 5.0
HTML
HTML elements are created from tags. When a webpage displays, the browser
creates a list of elements. The list resembles a tree. The tree has a root, the root
has branches. Some branches have sub-branches that are also considered
branches. A root can have a leaf. Most branches have leaves. In a computer
application, the root is the monitor (in reality, the operating system influences the
resolution set on the monitor, but we will get into that because we don't need all
that headache at this time).

On a webpage and in HTML, the parent is the body element. All the other
elements are created directly or indirectly in that body element. Here is an
example:
HTML 5.0

THE BODY OF A WEB PAGE


The primary purpose of a webpage is to display something to a visitor, which is
done on the visitor’s screen or monitor. Everything that displays on a browser
must be delimited by an element named body. Because the result displayed to
the visitor is part of the whole webpage, the body element must be nested in the
html element.

In the body, you can put anything you want to display to the visitor.

<html></html>
HTML 5.0
HTML
If you want webpage to follow the current standards of CSS, you should
start its first line with:
<!DOCTYPE html>

<html>
<body></body>
</html>
HTML 5.0
HTML

<html>
<head></head>
<body></body>
</html>
HTML 5.0
HTML
<html>
<head>
<title>Some Demo<title>
</head>
<body></body>
</html>
HTML 5.0
HTML
Introduction to Website/Webpages Maintenance
HTML 5.0

Introduction to Website/Webpages Maintenance


Meta Tags
A meta tag is an element that gives some functional instructions to applications that access a webpage.

Meta tags are created in the head section of a webpage. Most meta tags are created using a tag named meta.
The meta element uses (or must use) attributes that indicate what it is used for. The primary element used by
the meta tag is named name. This attribute is used to specify the meta tag that is being defined. The second
attribute is named content and it holds the value of the first attribute. The meta element is not closed.
Therefore, the primary formula to create a meta tag is:

<meta name="value" content="value" . . . >

<html>
<head>
<meta name="author" content=“Joy Nii Ofei Crisp-Dodoo">
<meta name="keywords" content=“mall, personal, business, shop, joyshopping">
<meta name="description" content="This is the corporate website of Watts A Loan, a small business that provides
loans and financial services.">
<title>Joy Shopping Mall</title>
<head>
HTML 5.0

Introduction to attributes of an html elements


An attribute is additional information that a tag needs in order to better display its
intended object.

If the value of an attribute is a number, simply assign that number to the attribute. If the
value of an attribute is a number or text:

If the value is in one word, you can just provide it. This would be done as follows:
attribute-name=value

Whether the value is in one word or not, it can be provided in single-quotes:


attribute-name = 'value’

The value can also be given in double-quotes:


attribute-name = "value"
HTML 5.0

You can put space in either or both sides of =, or you can omit the empty space.

Attributes are separated by empty spaces. Like tags, attributes follow some rules:

An attribute can be created only in the start tag


Not all tags use or need attributes
If a tag is using more than attribute, the attributes can come in any order as long as each attribute indicates its
name and its value
Most attributes are optional, but in most circumstances, some tags absolutely need one or more attributes in
order to have any significant meaning
Some tags (almost) require attributes. Such tags mean nothing in the absence of their attribute(s). This means
that you can omit the attribute(s) and nothing would happen
The names of all attributes are based on HTML standards. The values of some attributes are provided or
defined in HTML. The values of many other attributes must be created from external languages (JavaScript,
CSS, etc). This means that adding an attribute is not enough: another language must define the role of such an
attribute. In our HTML lessons, we review only the tags that do not require an attribute from an external
language
Most attributes are appropriate for only some tags. This means that some attributes have no effect when used in
HTML 5.0

A paragraph is text that is physically separate from other text, such as another
paragraph. A paragraph is created with an element named p. Because a
paragraph is displayed to a visitor, it must be created by the body element.
<html>
<head>
<title>Anything Here</title>
</head>
<body>
<p>Now it is time to do some things.
</p>
</body>
</html>
HTML 5.0

Breaking a paragraph consists of suspending its line and continuing on the


next line. This is done using the br element. This is one of the elements that
is not closed. That is, the br element uses only the start element and no end
element.

<p>What have you <br>done today?</p>


HTML 5.0

HTML provides special types of short paragraphs named headings. In reality,


they are used to create head sections or titles for paragraphs or sections of the
webpage.

A heading is created using an element made of the letter h (or H of course)


followed by a number as 1, 2, 3, 4, 5, or 6. As you may imagine, h stands for
heading and the digit is an incremental size of the text (that digit doesn't
represent the size of text; it simply sets one heading size apart from another).
The digits represent an incremental rank. This means that, by default,
characters created with h2 are bigger than those created with h4.
HTMLPreparation</h1>
<h1>Tax 5.0

<p>This application is used to evaluate tax.</p>

<h2>Federal Income Tax</h2>

<p>This section is for taxes paid or owed to the federal government. The Internal
Revenue Service (or IRS) collects such taxes.</p>

<h3>Social Security/Medicare</h3>

<p>Social security is money set aside for retirement days.</p>

<h4>State Tax</h4>
HTML 5.0
The Title of an Attribute
The title of an element is a tool tip you want to display when the visitor's
mouse is positioned on top of the contents of the element. To create a tool tip
for an element, add an attribute named title. Specify the text of your choice
as the value of the attribute.
HTML 5.0

The Identification(ID)
All elements of a webpages are considered objects and each can be
programmatically accessed with code. The primary way to access an element
is by identifying it. To support this, an element can be given an attribute
named id (or ID). The value of the identifier must be a string in one word
starting with a letter.
HTML 5.0

<h1 id="top">Watts A Loan: About Us</h1>

<p>Watts A Loan is a financial management business founded in 2002 by


Catherine Watts upon the death of her father. The company makes up loans
and
lends money to people as well as businesses.
<p>

<h2 id="mission" title="A sentence that defines why a company exists and
what its goals are.">Mission Statement</h2>
HTML 5.0

Text Alignment(Align)

When an element behaves as a container, you may want to position its content
to one side of its own container. To assist you with this, HTML provides an
attribute named align. It can take one three self-explanatory values that are:
left (the default), center, or right.
HTML 5.0

Horizontal Line(HR)
One way you can create a section on a webpage is to display a horizontal line.
This is done by creating an element using the hr tag.
HTML 5.0

The Division Tag


Instead of designating the group as a paragraph, HTML provides an alternate
element created with a tag named div. Like span, the div element doesn't do
anything significant by itself. Unlike the span element that can be nested
almost anywhere, the div element is used to create a section like a paragraph.
This means that div creates a section that starts on its own line.
INTRODUCTION TO HTML TEXT ELEMENTS
Text in any document, including a webpage, uses font, which is an artistic design of letters and symbols. Based on
the design of a particular font, some letters are wider or narrower than others. If you want the browser to apply a
fixed width to each letter or symbol, you must indicate that the browser must use a pre-formatted technique.

<pre>===========================================
Department <span title="This section includes the budget allocated to each department">Revenues</span>
<span title="This section shows the budget fraction available for each department of the company">Margin</span>
===========================================
<span title="The administration includes employees payroll, community services, etc">Administration</span>
3.5<abbr title="Millions">M</abbr> 23.33%
-------------------------------------------
Loans/Services 9M 60.00%
-------------------------------------------
Marketing 1.12M 6.80%
-------------------------------------------
R and D 1.35M 7.33%
-------------------------------------------
<abbr title="Community Outreach">CO</abbr> 480<abbr title="K stands for kilos. It represents
thousands">K</abbr> 2.53%
===========================================</pre>
INTRODUCTION TO HTML TEXT ELEMENTS
A Smaller Text
If you want text to appear smaller than that default, apply an element named small. Here is
an example:
<p>Data mining is a technique used in data analysis to identify
patterns, <small>repeating occurrences</small>, in a series of records</p>
To create bold text, use either the b or the strong tag.
To underline text, apply the i element.
To underline text, apply the u element
To strike through text, apply the s or the strike element.

To display text higher on a line than the other characters of the same line, apply the sup
element. Here is an example:

<p>In geometry, if two sides of a right triangle are known, the other side can
HTML 5.0

You need to be precise and careful about positioning items such as text,
paragraphs, pictures, etc, on your webpages. Bad positioning can make your
webpage weird or unorganized. Fortunately, HTML (and especially CSS) provides
many tools to assist you.
HORIZONTAL RULE(HR)
<h1>F#: Object-Oriented Programming</h1>
<p>Here are examples of creating records:</p>
<hr>
<pre>type Employee = {
EmployeeNumber : string
FirstName : string
LastName : string
HourlySalary : float }<pre>
HTML 5.0

A Bold Text
To create bold text, use either the b or the strong tag.
Italicized Text
To italicize text, apply either the i or the em element.
Italicized Strike Text

To strike through text, apply the s or the strike element.


INTRODUCTION TO HTML TEXT ELEMENTS
Another technique to display text in a pre-formatted way is by using an element named code.
There are differences between the pre and the code elements:

A code element can be nested in a paragraph but a pre element should never be nested in a paragraph
Line breaks are built in the pre element. This means that the pre element is equipped to display text as it is created.
Line breaks are not built in the code element. If you want to have line breaks, you can add br elements.

<p>Here is an example of a class in C#:</p>

<code>class Employee<br>
{<br>
string EmployeeNumber;<br>
string FirstName;<br>
string LastName;<br>
double HourlySalary;<br>
}</code>
HTML 5.0

ABBREVIATION(abbr)
An abbreviation is a technique of using a few letters or a combination of letters
and digits to represent a longer definition. To indicate that you want to show an
abbreviation, create an element named abbr. Normally, creating an abbr
element doesn't do anything. To indicate that a word represents an abbreviation,
you should add a title attribute to it and give the complete definition as the
value of that attribute.

<h3>Watts A Loan Owner and


<abbr title="Chief Executive Officer">CEO</abbr>: Catherine Watts
</h3>
HTML 5.0
To assists you, HTML provides a tag named span. By itself, the span element does
nothing. You will decide what to do with it. At the same time, span is used where you
don't want to (or cannot) formally use an HTML tag. One of the roles and advantages
of the span element is that it can be used just about anywhere, such as inside a
paragraph.
. . . . . . . .
Our financial statements include
<p><span title="The administration includes employees payroll, community services,
etc">Administration</span> 3.5<abbr title="Millions">M</abbr>
</p>
<p><span title="This section includes the budget allocated to a
department">Revenues</span></p>
<p><span title="This section shows the budget fraction available for each
department of the company">Margin</span> 23.33%
</p>
.... . . . .
HTML 5.0

A Blockquote
Published scholar papers usually contain citations to give credits to authors of
formal and interesting quotes. Some of the quotes are created in indented
paragraphs. To let you create such a paragraph, HTML provides a tag named
blockquote. Normally, a block quote behaves like a section; that is, it serves as a
contrainer. In its body, you can directly create text or nest other elements such
as paragraphs
. . . . . . .
<p align="center">Our financial statements include</p>
<blockquote>
<p>Administration 3.5M</p>
<p>Revenues</p>
<p>Margin 23.33%</p>
CO 480K
</blockquote></body></html>
HTML 5.0

HTML Symbol Name Code


‘ Single-Quote &#39;
" Double-Quote &quot;
© Copyright &copy;
Non-Breaking Space &nbsp;
® Registered &reg;
° Degree &deg;
± Plus or Minus &plusmn;
¥ Japanese Currency &yen;
€ Euro Currency &euro;
Anchor Element
The “A” Element
This provides the ability to navigate or jump from one document or piece of information to
another document, another library, another distraction, etc. HTML supports various types of
links. HTML supports various types of links.

The primary technique to initiate a link is to create an element named a. The primary attribute of
a link is named href. This attribute is used to indicate what to link. The formula to follow is:

<a href="">label</a>

A local link is a means of jumping from one section of a document to another section. This
functionality is available for vertical sections. One way to provide the ability to jump to a
section of a document is to add an identifier to an element. This is done by adding an id attribute
to an element.

To provide a local link in a document, provide the identifier of the element as the value of the
href attribute. The name of the identfier must be preceded with #.
Anchor Element

The “A” Element


By default, a website has a default webpage, which is usually named
index.htm, index.html, default.htm, or default.html, etc. Based on this, you
can create a link to the website and the default webpage would
automatically display when the link is accessed.

Linking and Relative Path


Two webpages can belong to the same website but located in different
folders or directories. When two documents are in different folders, they are
said to have different parents. To provide a link from document to another,
you will provide a relative path, which is done using the // characters.
Consider that a document A needs to provide a link to a document B.
By default, when a visitor clicks a link, the intended document replaces the
document that is currently displaying. As an alternative, you can ask the
browser to display the linked document either in another window (or tab)
or to a specific window (or tab). To support this, the a element has an
optional attribute named target.

The values of the target attribute are:

_self: This is the default value, applied if you don't use the target attribute.
With this value, the intended document displays in the same window as
the document that initiated the link
_parent: This most works as the _self value
A name: You must provide the name of the window or tab that will show
the targeted document.
_blank: When the visitor clicks the link, a new window or tab will be
created and display the intended document
_new: The first time the visitor clicks a link, a new window or tab will be
created and display the intended document. If the visitor clicks another
link that also has the _new value, the new document will replace the one
in the other window, but that other tab will stay in the background. If you
want to access that other document, you must click its window or tab
_top: When the user clicks the link, another window or tab may be
created to display the intended document and that window or tab will
display in front of the other windows or tab
Internal Links : Links can also be created inside large documents to
simplify navigation. Today’s world wants to be able to get the
information quickly. Internal links can help you meet these goals.
Select some text at a place in the document that you would like to
create a link to, then add an anchor to link to like this:
<A NAME=“bookmark_name”></A>
The Name attribute of an anchor element specifies a location in
the document that we link to shortly. All NAME attributes in a
document must be unique.
Next select the text that you would like to create as a link to the
location created above.
<A HREF=“#bookmark_name”>Go To Book Mark</A>
E-Mail (Electronic Mail)

E.g. mailto:[email protected]
The type of service is identified as the mail client program. This type
of link will launch the users mail client.

The recipient of the message is [email protected]


<a HREF=“mailto:[email protected]”>Send me
More Information </a>
List of items
A list is a group of items created as a block. HTML supports two broad categories of lists:
ordered and unordered.
An unordered list is one whose elements appear with a dot on the left. This means that
items appear in any order of your choice. To get an unordered list, create an element
named ul.
The ul element is one of those that must act as parent to other elements. To add an item
to a list, create an element named li, which must be nested in the ul element. On the right
side of the start tag, put anything you want, such as text. The li element doesn't have to be
closed.
An ordered list is one in which each item has an incrementing label such as 1, 2, 3, etc,
or a, b, c, etc, or i, ii, iii, etc. To get an ordered list, create an element named ol.
As done for an unordered list, to add a list item, create an element named li.
List of items

DL: Definition List. This kind of list is different from the others. Each item in a DL consists of one or more
Definition Terms (DT elements), followed by one or more Definition Description (DD elements).
<DL>
<DT> HTML </DT>
<DD> Hyper Text Markup Language </DD>
<DT> DOG </DT>
<DD> A human’s best friend!</DD>
</DL>

HTML
Hyper Text Markup Language
DOG
A human’s best friend!
HTML 5.0
Other means of creating sections
A section is created using a tag named section. Simply creating a section tab only
starts a new empty paragraph but it doesn't do anything significant. To make it
useful, you must add "content" to it. The section can contain paragraphs of text,
etc.
A webpage that displays to a visitor may be made of different parts. The top
section can be referred to as header. To create a section for such a part, create an
element named header. Such a section is made to hold an introduction to the
webpage.
A technique to create a section is by using a tag named aside. A section created as
this element is supposed to be related to the other contents of the same page.

The bottom part of a webpage can be referred to as footer. To specify a section for
such a part, create a section named footer. The section can be made to contain
such items as a copyright notice or a navigational menu.
HTML 5.0

An article
An HTML article is a section that can be accessed, used, and managed
independently from the rest of a web page. Examples of articles are: responses to
webpages at the ends of news articles, reactions posted in a forum, etc.

To create an HTML article, add a tag named article. When creating an article, it is
suggested that its first child be a heading (h1 to h5) that identifies what the article
is used for.
An address section
The address section is an area where you want to show the contact information. To
create such a section, use a tag named address.
HTML 5.0

A figure is a section you want to use in your webpage any way you see fit. To get
such a section, create an element named figure. You can then put anything you
want in that section.

It is recommended that you usually add a caption to a figure section. To do this,


add an element named figcaption and put any short sentence you want in it.
HTML 5.0

Nav element
An HTML article is a section that can navigated independently from the rest of a
web page. Examples of articles are: responses to webpages at the ends of news
menus ,options,etc
Tables

In this chapter you will learn that tables have many uses in
HTML.
Objectives:
Upon completing this section, you should be able to:
1. Insert a table.
2. Explain a table’s attributes.
3. Edit a table.
4. Add a table header.
43
Tables


The <TABLE></TABLE> element has four sub-elements:
1. Table Row<TR></TR>.
2. Table Header <TH></TH>.
3. Table Data <TD></TD>.
4. Caption <CAPTION></CAPTION>.

The table row elements usually contain table header elements
or table data elements.

44
Tables

<table border=“1”>

<tr>

<th> Column 1 header </th>

<th> Column 2 header </th>

</tr>

<tr>

<td> Row1, Col1 </td>

<td> Row1, Col2 </td>

</tr>

<tr> 45
Tables

Column 1 Header Column 2 Header

Row1, Col1 Row1, Col2

Row2, Col1 Row2, Col2

46
Tables Attributes

BGColor: Some browsers support background colors in a table.

Width: you can specify the table width as an absolute number of
pixels or a percentage of the document width. You can set the width
for the table cells as well.

Border: You can choose a numerical value for the border width,
which specifies the border in pixels.

CellSpacing: Cell Spacing represents the space between cells and is
specified in pixels.

47
Table Attributes


CellPadding: Cell Padding is the space between the cell border and the cell contents and is
specified in pixels.

Align: tables can have left, right, or center alignment.

Background: Background Image, will be titled in IE3.0 and above.

BorderColor, BorderColorDark.

48
Table Caption


A table caption allows you to specify a line of text
that will appear centered above or bellow the table.
<TABLE BORDER=1 CELLPADDING=2>
<CAPTION ALIGN=“BOTTOM”> Label For My Table
</CAPTION>


The Caption element has one attribute ALIGN that
can be either TOP (Above the table) or BOTTOM
(below the table).
49
Table Header


Table Data cells are represented by the TD
element. Cells can also be TH (Table Header)
elements which results in the contents of the
table header cells appearing centered and in bold
text.

50
Table Data and Table Header Attributes


Colspan: Specifies how many cell columns of the table this
cell should span.

Rowspan: Specifies how many cell rows of the table this cell
should span.

Align: cell data can have left, right, or center alignment.

Valign: cell data can have top, middle, or bottom alignment.

Width: you can specify the width as an absolute number of
pixels or a percentage of the document width.

Height: You can specify the height as an absolute number of
pixels or a percentage of the document height.
51
Basic Table Code

<TABLE BORDER=1 width=50%>

<CAPTION> <h1>Spare Parts <h1> </Caption>

<TR><TH>Stock Number</TH><TH>Description</TH><TH>List Price</TH></TR>

<TR><TD bgcolor=red>3476-AB</TD><TD>76mm Socket</TD><TD>45.00</TD></TR>

<TR><TD >3478-AB</TD><TD><font color=blue>78mm Socket</font>


</TD><TD>47.50</TD></TR>

<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR>

</TABLE>

52
Table Data and Table Header Attributes
<Table border=1 cellpadding =2>
<tr> <th> Column 1 Header</th> <th> Column 2
Header</th> </tr>
<tr> <td colspan=2> Row 1 Col 1</td> </tr>
<tr> <td rowspan=2>Row 2 Col 1</td>
<td> Row 2 Col2</td> </tr>
<tr> <td> Row 3 Col2</td> </tr>
</table>

53
Table Data and Table Header Attributes

Column 1 Header Column 2 Header

Row 1 Col 1

Row 2 Col 2
Row 2 Col 1
Row 3 Col 2

54
Special Things to Note

•
TH, TD and TR should always have end tags.
Although the end tags are formally optional, many browsers will
mess up the formatting of the table if you omit the end tags. In
particular, you should always use end tags if you have a TABLE
within a TABLE -- in this situation, the table parser gets hopelessly
confused if you don't close your TH, TD and TR elements.
•
A default TABLE has no borders
By default, tables are drawn without border lines. You need the
BORDER attribute to draw the lines.
•
By default, a table is flush with the left margin
TABLEs are plopped over on the left margin. If you want centered
tables, You can either: place the table inside a DIV element with
attribute ALIGN="center".
Most current browsers also supports table alignment, using the
ALIGN attribute. Allowed values are "left", "right", or "center", for
example: <TABLE ALIGN="left">. The values "left" and "right" float
the table to the left or right of the page, with text flow allowed
around the table. This is entirely equivalent to IMG alignment
55
What will be the output?

<TABLE BORDER width=“750”>


<TR> <TD colspan=“4” align=“center”>Page Banner</TD></TR>

<TR> <TD rowspan=“2” width=“25%”>Nav Links</TD><TD colspan=“2”>Feature


Article</TD> <TD rowspan=“2” width=“25%”>Linked Ads</TD></TR>

<TR><TD width=“25%”>News Column 1 </TD> <TD width=“25%”><News Column 2


</TD></TR>
</TABLE>

56
The Output

57
HTML 5.0

CSS-CASCADING STYLE SHEET

Cascading style sheet, or CSS, is a set of instructions that indicate to a browser


how it should influence an HTML tag of a webpage.
HTML 5.0
SIZE OF TEXT
<tag-name style="style-name: value">
<body style="font-family: Georgia;">

One of the styles you can apply to text is to specify its size. This is done using a style
named font-size. The value of this style can be:

1)An absolute value: xx-small, x-small, small, medium, large, x-large, or xx-large
2)A relative value depending on the immediate element in which it is nested. The values
can be: smaller or larger
3)A decimal value
4)A percentage
HTML 5.0
TEXT COLOR
By default, text displays in black. To let you specify the color of text, CSS has a style named
color. The value of this style is the name of any color you know. All popular names of colors
are valid. Examples are Red, Black, White, Blue, Green, Yellow, Brown, Navy, Orange,
Maroon, Tan, Silver, Olive, Purple, Teal, Violet, Wheat, Aqua (or Cyan), Magenta (or Fuchsia),
Lime, Pink, Gold, Khaki, Tomato, Ivory, Salmon, Turquoise, Lavender, Indigo, Plum,
Chocolate, Beige, Orchid, Honeydew, Peru, and Snow, DarkRed, LightBlue, RoyalBlue,
SkyBlue, LightSkyBlue, LightSteelBlue, MediumBlue, MidnightBlue, LightGreen,
ForestGreen, LimeGreen, SeaGreen, SpringGreen, DarkGreen, LawnGreen, MediumSeaGreen,
PaleGreen, GreenYellow, YellowGreen, LightYellow, FloralWhite, OrangeRed, LightCyan,
MediumPurple, HotPink, DarkMagenta, FireBrick, DimGray, IndianRed, DarkOrange,
DarkViolet, DarkTurquoise, DarkOliveGreen, DarkKhaki, DeepSkyBlue, LightPink, DeepPink,
MediumTurquoise, and WhiteSmoke.
The names of colors are not case-sensitive. This means that you can use a ll lowercase: Examples
are red, green, or white
All uppercase: Examples are RED, YELLOW, or MAGENTA
HTML 5.0
MANY STYLES
You can apply as many styles as you need to an element. You have many options. When
inline, you can create different styles in the style attribute. In this case, each style must
end with a semi-colon. You can omit or use a semicolon on the last style
<h4 style="font-family: Georgia; font-size: 14pt; color: red;">Database Management:
Security</h4>

<p style="color: black; font-family: Times;">One of the techniques to secure a


database <cite style="color: blue;">object</cite> is through a trigger, which is
an action performed when an event occurs on a database or on a table (or view).</p>
HTML 5.0
CSS-CASCADING STYLE SHEET
DOCUMENT-BASED STYLING
On an HTML element, the style attribute is used to apply a style to only that element. if
you want to apply the same style to another tag, you must re-create the same style on that
other tag.

On an HTML element, the style attribute is used to apply a style to only that element. if you want to apply the
same style to another tag, you must re-create the same style on that other tag. The alternative is to create the
style at file scope and make the style available to any HTML element in the same file.

To create a style that can be applied to various HTML tags of a document, in the head
section of the webpage, create an element named style and close.

<style type="text/css">
</style>
HTML 5.0
CSS-CASCADING STYLE SHEET
CREATING A CSS FILE
If you create a style directly in an HTML document that uses it, the style is available only
in that webpage. In some cases, you may want to apply a style to elements in different
webpages. To do that, you can create CSS code in its own file and let other pages access it..

A file-based CSS is created as a normal text-based document. The content of the file is made of styles like those
created in the head section of a webpage. The only different is that code in the CSS file doesn't have to be
delimited with <style> and </style>. A CSS file has the extension .css
You can create a file-based style in a folder of your website. Here is the content of a file named exercise.css:
JAVA SCRIPT

JAVA SCRIPT

JavaScript is a web-based computer programming language that provides


functionality that was neither created nor available when HTML and the Internet
were created. The JavaScript language was created to perform operations such as
calculations, file loading/reading, communication (email, networking, etc), clock
(dates and times), etc, things that HTML could not do.
It can also be combined with CSS.

The JavaScript language is automatically installed (built) in almost every browser.


This means that you don't have to include or "load" it in your webpage before
using it. Still, because it is not HTML, you must indicate that you want to use its
role in your HTML code. You have two main options.
JAVA SCRIPT

JAVA SCRIPT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>

</script>
</head>
<body>

</body>
</html>

You might also like