WEB DEVELOPMENT 101-3 by Kutch

WEB
DEVELOPMENT
BASIC
WEB DEVELOPMENT - BASIC
1st Session 3rd Session
History, Requirements, Understanding Web Server HTML Coding continuation
EXAM
2nd Session
HTML Basics, Definitions and Coding 4th Session
HTML in Action, Uploading files in Web Server,
Complete Simple Live Web Page
HTML IN-DEPTH - CASE STUDY
CASE STUDY #6 – Change the Link Text to Buttons
MENU Links
1. Open page page4.html & page3.html & page2.html & page1.html
2. Remove Menu
1. PAGE 1 and link to page1.html
3. Create a Button with following label:
4. Then save accordingly
LET’S MAKE WEBSITE!
HTML Page Structure
HTML - BASIC
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
HTML - BASIC
HTML Headings HTML HTML LINKS HTML IMAGES HTML HTML LISTS
HTML headings are defined BUTTONS HTML LISTS ARE DEFINED
with the <h1> to <h6> tags. PARAGRAPHS HTML LINKS ARE HTML IMAGES ARE
WITH THE <UL>
HTML DEFINED WITH DEFINED WITH THE <IMG> HTML
(UNORDERED/BULLET LIST)
<h1> defines the most PARAGRAPHS ARE THE <A> TAG: TAG. BUTTONS ARE OR THE <OL>
important heading. <h6> DEFINED WITH
defines the least important DEFINED WITH (ORDERED/NUMBERED
heading: THE <P> TAG: EXAMPLE THE SOURCE FILE (SRC), THE LIST) TAG, FOLLOWED BY
<BUTTON> <LI> TAGS (LIST ITEMS):
<A ALTERNATIVE TEXT (ALT),
Example HREF="HTTPS://WWW.KM3
<h1>This is heading 1</h1> EXAMPLE WIDTH, AND HEIGHT ARE TAG:
3.COM">THIS IS A EXAMPLE (UNORDERED)
<h2>This is heading 2</h2> <P>THIS IS A LINK</A> PROVIDED AS ATTRIBUTES:
<h3>This is heading 3</h3> <UL>
PARAGRAPH.</P> EXAMPLE <LI>KUTCH</LI>
<P>THIS IS ANOTHER <BUTTON>CLICK <LI>NEPH</LI>
PARAGRAPH.</P> EXAMPLE
ME</BUTTON> <LI>AMIE</LI>
<IMG SRC=”IMAGE.JPG"
ALT=”KM33.COM" WIDTH="104"
</UL>
HEIGHT="142">
HTML - BASIC
HTML Lists Example (ordered)
HTML lists are defined with the <ul> <ol>
(unordered/bullet list) or the <ol> <li>Kutch</li>
(ordered/numbered list) tag, followed <li>Neph</li>
<li>Amie</li>
by <li> tags (list items): </ol>
Example (unordered) Example (ordered and start with number 3)
<ul> <ol start=3>
<li>Kutch</li> <li>Kutch</li>
<li>Neph</li> <li>Neph</li>
<li>Amie</li> <li>Amie</li>
</ol>
</ul>
HTML IN-DEPTH - ATTRIBUTES
HTML Attributes
href Attribute
All HTML elements can have src Attribute
attributes width and height Attributes
Attributes provide additional alt Attribute

information about an element style Attribute
Attributes are always specified in the lang Attribute
start tag
title Attribute
Attributes usually come in name/value
pairs like: name="value"
HTML IN-DEPTH – CASE STUDY
CASE STUDY #1 CASE STUDY #3
CASE STUDY #2
CASE STUDY #4 CASE STUDY #5 CASE STUDY #6

WEB DEVELOPMENT – BASIC DAY 3
HTML Headings HTML Text Formatting
HTML Paragraphs HTML Colors
HTML Styles
HTML IN-DEPTH - HEADINGS
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
CASE STUDY
Headings Are Important
Search engines use the headings to index the structure and content of your web pages.
<h1> headings should be used for main headings, followed by <h2> headings, then the less important
<h3>, and so on.
Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading with the style
attribute, using the CSS font-size property:
Example
<h1 style="font-size:60px;">Heading 1</h1>
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
HTML Paragraphs
The HTML <p> element defines a paragraph:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Display
You cannot be sure how HTML
will be displayed.
Large or small screens, and

resized windows will create
different results.
With HTML, you cannot change

the output by adding extra spaces
or extra lines in your HTML code.
The browser will remove any

extra spaces and extra lines when
the page is displayed:
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
CASE STUDY
The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both
spaces and line breaks:
Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.

</pre>
HTML IN-DEPTH - STYLES
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
HTML Background Color
The background-color property defines the background color for an HTML element.
This example sets the background color for a page to powderblue:
Example
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
HTML Text Color
The color property defines the text color for an HTML element:
Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
HTML Fonts
The font-family property defines the font to be used for an HTML element:
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
CASE STUDY
HTML Text Size
The font-size property defines the text size for an HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:50px;">This is a paragraph.</p>
HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:
Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
CASE STUDY
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text

HTML IN-DEPTH - FORMATTING
Tag Description
HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importance. <b> Defines bold text

Example
<b>This text is bold</b> <i> Defines italic text

The HTML <strong> element defines strong text, with added semantic "strong"
importance. <sub> Defines subscripted text
Example <sup> Defines superscripted text
<strong>This text is strong</strong> <ins> Defines inserted text
<mark> Defines marked/highlighted

text
Tag Description
HTML <i> and <em> Elements
<b> Defines bold text

The HTML <i> element defines italic text, without any extra importance.
<i> Defines italic text
Example <small> Defines smaller text

<i>This text is italic</i>
<sup> Defines superscripted text
<ins> Defines inserted text

The HTML <em> element defines emphasized text, with added semantic importance.
Example <mark> Defines marked/highlighted

<em>This text is emphasized</em> text
Tag Description
HTML <small> Element
The HTML <small> element defines smaller text: <b> Defines bold text

Example
<h2>HTML <small>Small</small> Formatting</h2> <i> Defines italic text
HTML <mark> Element <sup> Defines superscripted text
The HTML <mark> element defines marked or highlighted text: <ins> Defines inserted text
Example <del> Defines deleted text
<h2>HTML <mark>Marked</mark> Formatting</h2> <mark> Defines marked/highlighted

text
Tag Description
HTML <del> Element
The HTML <del> element defines deleted (removed) text. <b> Defines bold text

Example
<p>My favorite color is <del>blue</del> red.</p> <i> Defines italic text
HTML <ins> Element <sup> Defines superscripted text
The HTML <ins> element defines inserted (added) text. <ins> Defines inserted text
<p>My favorite <ins>color</ins> is red.</p> <mark> Defines marked/highlighted

text
Tag Description
HTML <sub> Element
The HTML <sub> element defines subscripted text. <b> Defines bold text

Example
<p>This is <sub>subscripted</sub> text.</p> <i> Defines italic text
HTML <sup> Element <sup> Defines superscripted text
The HTML <sup> element defines superscripted text. <ins> Defines inserted text
<p>This is <sup>superscripted</sup> text.</p> <mark> Defines marked/highlighted

text
HTML IN-DEPTH - COLORS
HTML Colors
HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
https://en.wikipedia.org/wiki/Web_colors
Background Color
You can set the background color for HTML elements:
Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Text Color
You can set the color of text:
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Border Color
You can set the color of borders:
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and
HSLA values:
Same as color name "Tomato":
Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
HTML IN-DEPTH –COMBINE STYLES
CASE STUDY #7 (Headings) Output
Mark up the following text with appropriate tags:
"Universal Studios Presents" is the most important content.
"Jurassic Park" is the next most important content.
"About" is of lesser importance than Jurassic Park.
The last sentence is just a paragraph.
HTML to fix
Headings
CASE STUDY #8 (Paragraphs)
Fix the display of the text below. Display the text over 4 lines using <br> elements.
Output
HTML to fix
Paragraphs
CASE STUDY #9 (Paragraphs)
Change the text size of the paragraph to 50px.
Output
HTML to fix
Paragraphs
CASE STUDY #10 (Styles)
Change the background color of the page below to yellow.

Center align all content on the page.
Output
HTML to fix
Styles
CASE STUDY #11 (Styles)
Change the font of the paragraph to "courier".

Change the text size of the paragraph to 50px. Output
HTML to fix
Styles
QUIZ
https://tinyurl.com/yav5tef3
PROJECT
Group your self into 6 (3 Groups)

Build a website with at least 5 Pages
To be done plainly in HTML
Menu will be same same on 5 Pages
Headings will be same on 5 Pages

WEB DEVELOPMENT 101-3 by Kutch

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WEB DEVELOPMENT 101-3 by Kutch

Uploaded by

Copyright:

Available Formats

WEB

<h1>My First Heading</h1>

All HTML elements can have src Attribute

attributes width and height Attributes

Attributes provide additional alt Attribute

CASE STUDY #4 CASE STUDY #5 CASE STUDY #6

HTML Paragraphs HTML Colors

Large or small screens, and

With HTML, you cannot change

The browser will remove any

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

The HTML style attribute has the following syntax:

This example sets the background color for a page to powderblue:

HTML Text Alignment

<b> Defines bold text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines smaller text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

<em> Defines emphasized text

<small> Defines smaller text

Example <sup> Defines superscripted text

<strong>This text is strong</strong> <ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted

<em> Defines emphasized text

Example <small> Defines smaller text

<sup> Defines superscripted text

<ins> Defines inserted text

Example <mark> Defines marked/highlighted

<em> Defines emphasized text

<small> Defines smaller text

<sub> Defines subscripted text

HTML <mark> Element <sup> Defines superscripted text

Example <del> Defines deleted text

<h2>HTML <mark>Marked</mark> Formatting</h2> <mark> Defines marked/highlighted

<em> Defines emphasized text

<small> Defines smaller text

<sub> Defines subscripted text

HTML <ins> Element <sup> Defines superscripted text

Example <del> Defines deleted text

<p>My favorite <ins>color</ins> is red.</p> <mark> Defines marked/highlighted

<em> Defines emphasized text

<small> Defines smaller text

<sub> Defines subscripted text

HTML <sup> Element <sup> Defines superscripted text

Example <del> Defines deleted text

<p>This is <sup>superscripted</sup> text.</p> <mark> Defines marked/highlighted

Same as color name "Tomato":

Change the text size of the paragraph to 50px.

Change the background color of the page below to yellow.

Change the font of the paragraph to "courier".

Group your self into 6 (3 Groups)

You might also like