Scribd
Upload
2 views

HTML

The document provides an overview of HTML, covering essential topics such as colors, lists, forms, and the distinction between block and inline elements. It includes examples of various HTML elements and attributes, demonstrating how to use them effectively in web development. Additionally, it explains how to create image links and the importance of using labels in forms for accessibility.

Uploaded by

Cherrylyn Ramos
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

HTML

The document provides an overview of HTML, covering essential topics such as colors, lists, forms, and the distinction between block and inline elements. It includes examples of various HTML elements and attributes, demonstrating how to use them effectively in web development. Additionally, it explains how to create image links and the importance of using labels in forms for accessibility.

Uploaded by

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

HTML HyperText

Markup
Language

Reporters:
Andre Pete Flores
Jomar Cedeño
Gian Carl Bello
Jaryl Andrei Rodelas
John Paul Juaman
Charles Arcamo
Joshua Bueta
Arby Vasquez
John Jerby Ramirez
TABLE OF CONTENTS

HTML Block, Inline


HTML Colors Elements, and Span
Pages 3-8 01 04 Pages 30-34

HTML List HTML Image Links


Pages 9-21 02 05 Pages 35-37

HTML Forms
Pages 22-29 03
HTML Colors

In HTML, Colors help differentiate text from


the background, making content easier to
read.

•RBG
•RBGA
•Color names
•HEX
•HSL
•HSLA
2.RGBA (Red, Green, Blue,
1.RGB (Red, Green,
Alpha)
Blue) •RGBA adds an alpha channel for
•RGB colors are defined using the transparency.
rgb() function. •The alpha value ranges from 0
•Each value (red, green, blue) (fully transparent) to 1 (fully
ranges from 0 to 255. opaque).
•Example: rgb(255, 0, 0) is pure red.
Example: rgba(0, 0, 255, 0.5) is
semi-transparent blue.
Example code: Example code:
<p style="color: rgb(255, 0, <p style="color: rgba(255, 0, 0,
0);">This text is red using 0.5);">This text is semi-transparent
RGB.</p> red using RGBA.</p>
<p style="background-color: rgb(0, <div style="background-color: rgba(0,
255, 0);">This has a green 255, 0, 0.3); padding: 10px;">
background using RGB.</p> This has a semi-transparent green
Output: background using RGBA.
</div>
Output:
3. Color Names 4. HEX Colors
•HTML5 supports 140 predefined HEX (Hexadecimal Color Code) is a
color names (e.g., red, blue, way to define colors in HTML &
green, coral, rebeccapurple, CSS using a 6-digit or 3-digit
etc.). code. It starts with # followed
by numbers (0-9) and letters (A-
Example code: F).
<p style="color: blue;">This text is
blue using a color name.</p> Example of HEX
<p style="background-color: Colors:
orange;">This has an orange
background using a color #FF0000 → Red
name.</p> #00FF00 → Green
#0000FF → Blue
Output: #FFFF00 → Yellow
#FFFFFF → White
#000000 → Black
Output:
Example code:
<!DOCTYPE html>
<html>
<body>
<h1 style=”background-
color:black; color:
#ff0000;”>#ff0000 = red</h1>
<h1 style=”background-color:
gray; color: #0000ff;”>#0000ff
= blue</h1>
<h1 style=”background-color:
pink; color:
#3cb371;”>#3cb371 =
green</h1>
<h1 style=”background-color:
black; color:
#ee82ee;”>#ee82ee =
violet</h1>
<h1 style=”background-color:
brown; color:
#ffa500;”>#ffa500 =
orange</h1>
5. HSL Colors
HSL (Hue, Saturation, and Lightness)
HSL is a modern way to specify colors in HTML and CSS. It consists of three components:
Hue (H): Represents the color type in degrees on a color wheel (0-360). For example, 0 is red, 120 is green,
and 240 is blue.
Saturation (S): Defines the intensity of the color (0% is grayscale, 100% is the full color).
Lightness (L): Determines how light or dark the color is (0% is black, 100% is white).

Example code: Output:


<!DOCTYPE html>
<html>
<h1 style=”background-color: hsl(0, 100%, 50%); color:black;”> 0 is red.</h1>
<h1 style=”background-color: hsl(30, 100%, 50%);color: black;”>30 is
orange.</h1>
<h1 style=”background-color: hsl(60, 100%, 50%);color: black;”> 60 is
yellow.</h1>
<h1 style=”background-color: hsl(120, 100%, 50%);color: black;”> 120 is
green.</h1>
<h1 style=”background-color: hsl(180, 100%, 50%);color: black;”> 180 is
cyan.</h1>
<h1 style=”background-color: hsl(240, 100%, 50%);color: black;”> 240 is
blue.</h1>
6. HSLA Colors
HSLA (Hue, Saturation, Lightness, and Alpha)
HSLA extends HSL by adding an alpha (A) component, which controls transparency.

Alpha (A): Defines the opacity of the color, raging from 0 (completely transparent) to 1 (fully opaque).

Example code:
</html<!DOCTYPE html> Output:
<html>
<h1 style=”color: hsla(0, 100%, 50%, 0.5); background-color:black;”> 0 is
red.</h1>
<h1 style=”color: hsla(30, 100%, 50%, 0.5); background-color: black;”>30
is orange.</h1>
<h1 style=”color: hsla(60, 100%, 50%, 0.5); background-color: black;”>
60 is yellow.</h1>
<h1 style=”color: hsl(120, 100%, 50%, 0.5); background-color: black;”>
120 is green.</h1>
<h1 style=”color: hsl(180, 100%, 50%, 0.5); background-color: black;”>
180 is cyan.</h1>
<h1 style=”color: hsl(240, 100%, 50%, 0.5);background-color: black;”>
240 is blue.</h1>
HTML List

HTML lists allow web developers to group a


set of related items in lists.

• Unordered List
• Ordered List
• Description List
• Nested List
• Control List Counting
UNORDERED HTML
LIST
An unordered list starts with the
<ul> tag. Each list item starts
with the <li> tag.

Example code: Output:


UNORDERED HTML LIST - CHOOSE LIST ITEM
MARKER
The CSS list-style-type property is
used to define the style of the
list item marker. It can have one
of the following values:
EXAMPLE - DISC

EXAMPLE – CIRCLE
EXAMPLE - SQUARE

EXAMPLE – NONE
ORDERED HTML LIST
An ordered list starts with the <ol>
tag. Each list item starts with
the <li> tag.

Example code: Output:


ORDERED HTML LIST - THE TYPE ATTRIBUTE
The type attribute of the <ol> tag,
defines the type of the list item
marker:
EXAMPLE - NUMBERS

EXAMPLE – UPPERCASE
LETTERS
EXAMPLE – LOWERCASE
LETTERS

EXAMPLE – UPPERCASE ROMAN NUMBERS


EXAMPLE – UPPERCASE ROMAN NUMBERS
CONTROL LIST COUNTING
By default, an ordered list will start
counting from 1. If you want to
start counting from a specified
number, you can use the start
attribute:
NESTED LIST
A list placed inside the another list.
DESCRIPTION LIST
A description list in HTML is a list of terms and their corresponding descriptions, created using the <dl>,
<dt>, and <dd> tags.
HTML Forms

An HTML form is used to collect user input.


The user input is most often sent to a server
for processing. They are created using the
<form> element and typically include various
input fields, buttons, and labels.
The <form> Element
HTML forms are used to collect user
Examples:
input and send it to a server for
processing. They are created using
the <form> element and typically
include various input fields,
buttons, and labels.

The <input> Element


The HTML <input> element is the most
used form element.

An <input> element can be displayed


in many ways, depending on the
type attribute.
Text Fields
The <input type="text"> defines a
single-line input field for text input.

Example code:
<form>
<label for="fname">First
name:</label><br>
<input type="text" id="fname"
name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname"
name="lname">
</form>.
The <label> Element
Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focuses on the input
element.

The <label> element also helps users who have difficulty clicking on very
small regions (such as radio buttons or checkboxes) - because when
the user clicks the text within the <label> element, it toggles the radio
button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.
Radio Buttons
The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited


number of choices.

Example code:
<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html"
name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language"
value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Checkboxes
The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of


a limited number of choices.

Example code:
<form>
<input type="checkbox" id="vehicle1"
name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2"
name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3"
name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Submit Button
The <input type="submit"> defines a button for
submitting the form data to a form-handler.

The form-handler is typically a file on the server with


a script for processing input data.

The form-handler is specified in the form's action


attribute.

Example code:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
The Name Attribute for
<input>
Notice that each input field must have a name
attribute to be submitted.

If the name attribute is omitted, the value of the input


field will not be sent at all.

Example code:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname"
value="John"><br><br>
<input type="submit" value="Submit">
</form>
HTML Block, Inline
Elements, and span

GOSTUDI In HTML, elements are categorized into


"block-level" and "inline" elements based on
how they behave in the document flow.

O
1. Block-Level
Elements 2. Inline Elements
 Always start on a new line.  Do not start on a new line.
 Take up the full width available  Only take up as much width as
(stretching from left to right). necessary (wraps around
 Commonly used to define content).
sections of a webpage.  Typically used inside block
elements.

Example code: Example code:


<div>This is a block element.</div> <a href="#">This is a link</a>
<p>This is a paragraph.</p> <strong>Bold text</strong>
<h1>Heading 1</h1> <em>Italic text</em>
3. The <span>
Element
 A "generic" inline container for
styling or scripting.
 Doesn't add any visual effect by
default.
 Used when no other semantic
element fits.

Example code:
<p>This is a <span style="color:
red;">red</span> word in a
sentence.</p>

Take note that the <span> element is an


inline element, so it naturally works
best with other inline elements.
However, you can still use <span>
inside a block element if needed.
What Works Best
Examples:
Together? Inline + Inline (Valid)
 Inline elements (like <span>) Sample Code:
work best inside other inline <a href="#">Click <span style="color:
elements. blue;">here</span></a>
 Block elements can contain - A <span> inside an <a> (both inline) works
both block and inline elements. fine.
 Inline elements (like <span>)
should NOT contain block Examples
elements. (This is invalid in Inline + Block (Invalid)
HTML.)
Examples: Sample Code:
Examples: <span> <div>This is a block inside a
Block + Inline (Valid) span</div> </span>
- You cannot put a block element (<div>)
Sample Code: inside an inline element (<span>). It will
<p>This is a <span style="color: break the layout.
red;">red word</span> in a - So, block elements work with both, but inline
paragraph.</p> elements (like <span>) should not contain
- A <p> (block) contains a <span> block elements.
(inline), which is correct.
HTML Image Links

In creating an image link, the <img> tag is


nested inside the <a> tag to make the image
clickable. Once the image is clicked, it will
redirect to the specified URL in the <a> tag.
<a> - used to create hyperlink and make text
HTML Image Link or image clickable.
<a> tag attributes:
<img> - used to display image on the
web page. It doesn't have closing tag. href - specifies the destination of link or URL.
<img> tag attributes: Example:
<a href="https://www.sample.com">Click
src - it is the path to the image. Here</a>
Example:
<img src="sample.jpg"> target - defines how the link opens. ( _blank to
open the link in a new tab.)
Example:
alt - provides alternatives text for <a href="https://www.sample.com"
accessibility target="_blank">Click Here</a>
Example:
<img src="sample.jpg" alt="Sample
Image">

width and height - it is used to change


or adjust the image size.
Example:
<img src="sample.jpg" alt="Sample
Image" width="100" height="100">
Image Link Example
Code:

<!DOCTYPE html>
<html>
<head>
<title>Image Link</title>
</head>
<body>
<a href="https://www.sample.com"
target="_blank">
<img src="sample.jpg"
alt="Sample Image">
</a>

</body>
</html>
THANK YOU FOR
LISTENING!

You might also like