INTRODUCTION
The HyperText Markup Language or HTML is the standard markup
language for displaying documents designed through an HTML Editor. It
defines the meaning and structure of web content. Often assisted by tools
such as Cascading Style Sheets (CSS) and scripting languages such as
JavaScript. In order to run the HTML programs, Web browsers receive
HTML documents from a web server or from local storage and render the
documents into multimedia web pages. HTML describes the structure of a
web page semantically and originally included cues for its appearance.
OBJECTIVES
At the end of this handout, the students should be able to:
A. Understand how the Internet works as a way of disseminating information in
conceptualizing a website.
B. Apply HTML Basic elements in creating simple webpages.
C. Create an HTML Program using different ways of creating texts and adding
colors.
D. Successfully use elements and parameters used in manipulating Anchors and
Hyperlinks in HTML.
E. Integrate images to an HTML page with specifications.
TOPICS:
Getting Started
HTML Basics
Working with Texts and Colors
Working with Anchors and Hyperlinks
Images
INTRODUCTION
The HyperText Markup Language or HTML is the standard
markup language for displaying documents designed through an
HTML Editor. It defines the meaning and structure of web
content. Often assisted by tools such as Cascading Style Sheets
(CSS) and scripting languages such as JavaScript. In order to run
the HTML programs, Web browsers receive HTML documents from
a web server or from local storage and render the documents into
multimedia web pages. HTML describes the structure of a web
page semantically and originally included cues for its appearance.
Internet as a Medium for Disseminating Information
URL - (Uniform Resource Locator) usually starts with ‘https://’ and ends with ‘.com’, ‘.org’, ‘.edu’, ‘.gov’, etc…
- web addresses.
- every website has their own URL.
Webpages - what you see when you visit a website.
- contains all of the contents of the page (texts, graphics, sounds etc…)
Websites – collection of webpages which are grouped together and usually connected together in various
ways.
In perspective, URL is how you look for a specific book (Title of the book, the year of publication, authors,
etc…). just like web addresses they have their unique locator. Pages are the individual pages of the books, and
Sites are the Chapters of the book.
Web Browser – piece of software that runs on your personal computer and enables you to view web pages
- interprets the HTML codes a provides a visual layout displayed on the screen
Server - responsible for storing information, may it be websites, links, images, videos, etc. which you can see
on the internet.
Planning Your Website
Target Audience – to whom the website is for
- whom the websites is targeting?
- the users of the websites
- the target market
Setting your Goals – the website is aiming to do
- what the website is trying to accomplish?
Creating the Structure –
- How the website works with the goals in place?
- Structure of how the pages of the website interconnects
Organizing the Contents – how the contents of the website interconnects?
- In accessing a specific content of the webpage, this is how the users will get to that content from the
home page.
- Ex: we will access the contents inside the product by accessing index > shop > products,
simply index/shop/products/
Developing the Navigation – How the users will navigate the website
- Developing a good web page navigation avoids the users from getting confused and getting lost while
on the page.
HTML BASICS
HTML or HyperText Markup Language is a programming language that tells the web browsers
what to show and not how to show it.
- A means of giving instructions to the web browsers.
Structure of an HTML Program
Basic HTML Elements
<!doctype> - tells the web browser what version of HTML the program was made
<html> - frames the entire HTML Page
<head> - frames the identification information for the page
<title> - name of the page as seen on the top of the browser
<body> - content of the page
<p> - displays a paragraph
Whitespaces and Ways to Add Additional Spaces
- (non-breaking space) adds another space
  - (en space) adds two spaces
  - (em space) adds four spaces
<br> or <br/> - line break
<pre> - (pre-formatted text) runs the texts as they are written.
Texts and Colors
<p> - paragraph breaks
<mark> - highlighting texts
<b> - bold text, stylistic
<strong> - works similar as <b> , but used semantically as the text is
important to the surrounding text. (example text to voice apps would
read texts with <strong> in a different tone, but <b> would be read the
same as the texts surrounding it.
<i> - italicized the word, stylistically
<em> - works similar to <i>, but is used to bring emphasis to the text
<u> - underlines the text
<abbr> - shows the longform of the abbreviated texts when cursor is
hovered over the abbreviation
<ins> - marks the text as inserted
<del> - marks the text as deleted
<s> - struck through the text
<sup> - superscripts the text, offsets text upward (i.e. exponents,
trademarks, etc…)
<sub> - subscripts the text, offsets text downward (i.e. H2O)
Hexadecimal Colors – uses base 16 in determining specific colors.
Normal counting number only have 0 - 9 single values, in hexadecimal
numbers, for the remaining 6 values, we use the first 6 letters to
represent a color. (Red: 00 Green:00 Blue:FF)
color: #0000FF
RGB Values and Percentages – an easier way of referencing
colors. Instead of codes, we use the values itself to specify the amount
of RGB in the color. 0 being the darkest and 255 being the lightest.
color: RGB(0,0,255)
If values are still too much for you, percentage provides an even more
convenient referencing of colors.
color: RGB(0%,0%,100%)
Colors
Color Names – standard set of 16 colors, which can be reference by
their color names.
color: blue
RGBA – specifies “alpha value” or the transparency of the color. The
transparency is defined by a number between 0.0 (completely
transparent) and 1.0 (fully opaque)
color: RGBA(0,0,255,0.5)
<hr> - horizontal rule that creates a line across the web page.
LINKS
<a> - anchor tag, used for creating links in HTML
href - short for hypertext reference, attribute that tells the web
browser where you are linking to
name (#) - assigns a name to the link
target - attribute that tells the web browser where to open the
link.
_parent/_self - opens the link in the same tab
_blank - opens the link in a new tab
accesskey - assigns a shortcut key
STYLING LINKS
link - specifies the color of the links before it is clicked
visited - specifies the color of the links after they’ve been clicked
hover - specifies the color of the links while the cursor is
positioned over them
active - specifies the color of the links while they’re being clicked
Images
PARAMETERS
<img> - HTML tag for adding images
- img doesn’t need have a closing tag, so we close the tag by this format <img *attributes* />
- not using the closing syntax also works
src – attribute that identifies the location of the image
alt – alternative text to be displayed if the image fails loading
Web Browser Friendly Image File Types: (.gif, jpg, .jpeg, .png)
background-image: url( ); - sets a background image. (should be coded inside the body class inside the <style> tag.
- url( from local files or link of an image from the internet)
- background-size: cover – makes the background fit the screen’s resolution
- background-size: width% height% - specifies the size of the image by their height and width in percentage
background-repeat: no-repeat; - avoids the repetition of the image
width – specifies the width value of the image
height – specifies the height value of the image
float - specifies the location of the image, values are (left, right)
