Scribd
Upload
87 views37 pages

Week 11 12 - Basic Web Page Creation Using Static Website and Online Platform PDF

This document provides information about creating basic web pages using HTML tags. It defines common tags like <html>, <head>, <title>, <body>, and others and provides their syntax and purpose. It also explains how to specify font styles, colors and sizes using tags like <font> and includes code examples to demonstrate using the tags to structure a basic web page.

Uploaded by

John Lloyd Balinas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
87 views37 pages

Week 11 12 - Basic Web Page Creation Using Static Website and Online Platform PDF

This document provides information about creating basic web pages using HTML tags. It defines common tags like <html>, <head>, <title>, <body>, and others and provides their syntax and purpose. It also explains how to specify font styles, colors and sizes using tags like <font> and includes code examples to demonstrate using the tags to structure a basic web page.

Uploaded by

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

UNIT 10

BASIC WEB PAGE


CREATION USING
STATIC
WEBSITE AND ONLINE
PLATFORM
At the end of this lesson, the
students should be able to:
1. Identify the advantages of web
pages

2. Define the different tags in Hyper


Text Mark-Up Language

3. Apply basic HTML tags in creating


a web page

4. Steps in web page design using


online platform
The Internet has been a source of
information and communication. This is
evident through its component
called a website. The website refers to an
Internet service that contains information
composed of a group of webpages.

A web page is a single page that contains


text with hyperlinks; and a hyperlink is a text
that is connected to another web page. A
change in webpage occurs every time the
hyperlink is clicked
HTML Editor EXAMPLE

NOTEPAD ++ NOTEPAD JSBIN SUBLIME


Basic Tag Command
in Hyper Text Markup Language
< tag >
A tag refers to an HTML command that is
used to develop and design the webpage.
It is a word that is between a less than and
greater than symbol.

</tag >
A close tag refers to an html command that
suppresses the previous format used.
Tag parameter is attribute supplementary
command in a tag.
What is HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:

SYNTAX
HTML ELEMENT

<tag> Content </tag>


OPENING TAG CONTENT CLOSING TAG
HTML Element example
An HTML element is defined by a start tag, some content, and an end tag:

HTML ELEMENT

<title> Content </title>


OPENING TAG CONTENT CLOSING TAG
What is html style attribute reference?
The HTML style attribute is used to add styles to an element, such as color, font,
size, and more.HTML attributes are special words used inside the opening tag to
control the element's behavior. HTML attributes are a modifier of an HTML
element type.

SYNTAX
HTML ELEMENT

<title style=“property:value;”> Content </title>

STYLE ATTRIBUTE CONTENT CLOSING TAG


OPENING TAG
html style attribute reference EXAMPLE
The HTML style attribute is used to add styles to an element, such as color, font,
size, and more.HTML attributes are special words used inside the opening tag to
control the element's behavior. HTML attributes are a modifier of an HTML
element type.

HTML ELEMENT

<font style=“color:red;”> Content </font>

OPENING TAG STYLE PROPERTY VALUE CONTENT CLOSING TAG


CODE
<HTML> 1. <!DOCTYPE html>

</HTML>
2. <html>
3. </html>

• HTML stands for Hyper Text Markup Language


• HTML is the standard markup language for
creating Web pages
• HTML describes the structure of a Web page

<HEAD> 1.
2.
3.
<!DOCTYPE html>
<html>
<head>

</HEAD>
4. </head>
5. </html>

• The HTML <head> element is a container for


the following elements:
• <title>, <style>, <meta>, <link>, <script>,
and <base>.
CODE
<TITLE> 1. <!DOCTYPE html>

</TITLE>
2. <html>
3. <head>
4. <title> Title of the document </title>
5. </head>
• The <title> tag defines the title of the document. 6. </html>
The title must be text-only, and it is shown in the
browser's title bar or in the page's tab.
• The <title> tag is required in HTML documents!

<BODY> 1.
2.
3.
<!DOCTYPE html>
<html>
<head>

</BODY>
4. <title> Title of the document </title>
5. </head>
6. <body>
• The <body> tag defines the document's body. 7. The content of the document......
• The <body> element contains all the contents 8. </body>
of an HTML document, such as headings, 9. </html>
paragraphs, images, hyperlinks, tables, lists, etc.
CODE
<A HREF> 1. <a href=“www.google.com”> Google </a>

•
</A>
The <a> tag defines a hyperlink, which is used to
By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue


link from one page to another.
• A visited link is underlined and purple
• The most important attribute of the <a> element • An active link is underlined and red
is the href attribute, which indicates the link's
destination.

<B> 1. <b> content </b>

•
</B>
The <b> tag specifies bold text without any
extra importance.
CODE

<BR> 1. <br>

• The <br> tag inserts a single line break.


• The <br> tag is useful for writing addresses or
poems.
• The <br> tag is an empty tag which means that it
has no end tag.

<CENTER> 1. <center> content <center>

•
</CENTER>
The <center> tag was used in HTML4 to center-
align text.
CODE
<FONT> 1. <font style=“ font-size:10; color: red;”> content

</FONT>
</font>

Font Attributes
• font-family
• The <font> tag was used in HTML 4 to specify the • size
font face, font size, and color of text.
• color

<H1></H1> 1.
2.
<h1>This
<h2>This
is
is
heading
heading
1</h1>
2</h2>

<H6></H6>
3. <h3>This is heading 3</h3>
4. <h4>This is heading 4</h4>
5. <h5>This is heading 5</h5>
6. <h6>This is heading 6</h6>
• The <h1> to <h6> tags are used to define HTML
headings.
• <h1> defines the most important heading. <h6>
defines the least important heading.
CODE
<i> 1. <i> content </i>

•
</i>
The <i> tag defines a part of text in an alternate
voice or mood. The content inside is typically
displayed in italic.
• The <i> tag is often used to indicate a technical
term, a phrase from another language, a thought, a
ship name, etc.

<U> 1. <u> content </u>

•
</U>
The content inside the <u> is typically displayed
with an underline.
CODE
<P> 1. <p> content </p>

•
</P>
The <p> tag defines a paragraph.
• Browsers automatically add a single blank line
before and after each <p> element.

<OL> 1. <ol>
2. <li> Coffee </li>
3. <li> Tea </li>

</OL>
4. <li> Milk </li>
5. </ol>

• The <ol> tag defines an ORDERED LIST. An


ordered list can be numerical or alphabetical.
• The <li> tag is used to define each LIST ITEM.
CODE

<UL> 1. <ul>
2. <li> Coffee </li>

</UL>
3. <li> Tea </li>
4. <li> Milk </li>
5. </ul>
• The <ul> tag defines an UNORDERED LIST. An
ordered list can be numerical or alphabetical.
• The <li> tag is used to define each LIST ITEM.

<IMG SRC> 1. <img src=«picture1.jpg»>

• Images are not technically inserted into a web page; images are
linked to web pages. The <img> tag creates a holding space for
the referenced image.
• The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image, if the image for
some reason cannot be displayed
CODE
<VIDEO> 1. <video width="320" height="240" controls>

</VIDEO>
2. <source src="movie.mp4" type="video/mp4">
3. <source src="movie.ogg" type="video/ogg">
4. </video>

• The <video> tag is used to embed video content


in a document, such as a movie clip or other video
streams.
• The <video> tag contains one or more <source>
tags with different video sources. The browser
will choose the first source it supports.

<AUDIO> 1.
2.
<audio controls>
<source src="horse.ogg« type="audio/ogg">

</AUDIO>
3. <source src="horse.mp3" type="audio/mpeg">
4. </audio>

• The <audio> tag is used to embed sound


content in a document, such as music or other
audio streams.
• The <audio> tag contains one or more
<source> tags with different audio sources. The
browser will choose the first source it supports.
CODE
<TABLE> 1. <table border="1">

</TABLE>
2. <tr>
3. <th> content </th>
4. </tr>
5. <tr>
• The <table> tag defines an HTML table. 6. <td> content </td>
7. </tr>
• Each table row is defined with a <tr> tag. 8. </table>
• Each table header is defined with a <th> tag.
• Each table data/cell is defined with a <td> tag.

• By default, the text in <th> elements are bold and


centered.

• By default, the text in <td> elements are regular


and left-aligned.
CODE
<TH> 1. <table border="1">

</TH>
2. <tr>
3. <th> content </th>
4. </tr>
5. <tr>
• The <th> tag defines a header cell in an HTML 6. <td> content </td>
table.
7. </tr>
• An HTML table has two kinds of cells: 8. </table>
• Header cells - contains header information
(created with the <th> element)

<TD> 1.
2.
<table border="1">
<tr>

</TD>
3. <th> content </th>
4. </tr>
5. <tr>
• The <td> tag defines a standard data cell in an
6. <td> content </td>
HTML table. 7. </tr>
• The text in <td> elements are regular and left- 8. </table>
aligned by default.
CODE
<MARQUEE> 1. <marquee direction = "up"> content
</marquee>

</MARQUEE>
• The HTML <marquee> tag is used for scrolling
piece of text or image displayed either
horizontally across or vertically down your web
site page depending on the settings.

<!-- 1. <!– content -->

•
-->
The comment tag is used to insert comments in
the source code. Comments are not displayed
in the browsers.
CODE
<INPUT TYPE=“TEXT”> 1. <input type = ”text”>
• refers to the tag that is used add a textbox in the
web page

2. <input type = ”button” value= ”submit” >


<INPUT TYPE=“BUTTON”>
• refers to the tag that is used add a button in the
web page

3. <input type = ”checkbox” >


<INPUT TYPE=“CHECKBOX”>
• refers to the tag that is used add a checkbox in
the web page

<INPUT TYPE=“RADIO”> 4. <input type="radio" id="male" name="gender"


<LABEL> value="male">
• refers to the tag that is used add a radio button in <label for="male">Male</label>
the web page
UNIT 11

CASCADING
STYLE
SHEET
Cascading
Style-sheet
•CSS stands for Cascading Style Sheets
•CSS describes how HTML elements are to be displayed on screen, paper, or in other media
•CSS saves a lot of work. It can control the layout of multiple web pages all at once
•External stylesheets are stored in CSS files

CSS Syntax

• The selector points to the HTML element you want to style.


• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
• Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
Applying CSS
There are three ways to apply CSS to HTML:
Inline, internal, and external
Applying CSS: Inline styles are plonked straight into the
HTML tags using the style attribute

<font style=“color:red;”> Content </font>

INLINE CSS/ STYLE


Applying CSS:
Embedded, or internal, styles are used for the
whole page. Inside the head element, the style
tags surround all of the styles for the page.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title> Title of the document </title>

5. <style>
6. font{ color: red;}
7. </style>
8. </head>

9. <body>
10.<font>content</font>
Applying CSS: External styles are used for the whole, multiple-
page website. There is a separate CSS file,

file.html file.css
1. <!DOCTYPE html>
1. p {
2. <html>
2. color: red;
3. <head>
3. text-align: center;
4. <title> Title of the document </title>
4. }
5. <link rel="stylesheet" href=“file.css">
6. </head>
7. <body>
8. <p>Hello World!</p>
9. <p>These paragraphs are styled with CSS.</p>
10. </body>
11. </html>
MARGINS, BORDER, AND PADDING

• Margins, padding and borders are all part of


what’s known as the Box Model. The Box
Model works like this: in the middle you have the
content area (let’s say an image), surrounding
that you have the padding, surrounding that you
have the border and surrounding that you have
the margin. It can be visually represented like
this:
MARGINS, BORDER, AND PADDING
PROPERTY VALUE DESCRIPTION EXAMPLE

margin Numbers in px, Defines the size of the margin header{margin:


percentage, cm, etc. 50px;}

Border-style Solid, dotted, or Defines the border style Header{border-style:


dashed dotted;}

Border-width Numbers in pixel, Defines the width of the border header{border-


percentage, cm, etc. width: 25px;}

Border-color Name or hexadecimal Defines the color of the border header{border-color:


code of the color red;}

Padding Numbers in px, Defines the size of padding header{padding:


percentage, cm, etc. 5px;}
CSS PREDEFINE COLORS
CSS RGB COLORS

<h1 style="background-color:rgb(255, 0, 0);"> red </h1>


CSS HEX COLORS

<h1 style="background-color:#ff0000;"> red </h1>


JSBIN.com
Credits to

You might also like