[go: up one dir, main page]
Scribd
Upload
387 views65 pages

Wek 1-8 Web System and Technologies

This document discusses HTML and web design topics. It provides an overview of HTML vs XHTML, defining key differences. It also covers the W3C organization and their role in establishing web standards. Finally, it lists 10 rules for website design including keeping it simple, prioritizing design, having intuitive navigation, and maintaining consistency.

Uploaded by

Darwin Gapusan Raralio
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
387 views65 pages

Wek 1-8 Web System and Technologies

This document discusses HTML and web design topics. It provides an overview of HTML vs XHTML, defining key differences. It also covers the W3C organization and their role in establishing web standards. Finally, it lists 10 rules for website design including keeping it simple, prioritizing design, having intuitive navigation, and maintaining consistency.

Uploaded by

Darwin Gapusan Raralio
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/ 65

Worktext in ITC 113

WEB SYSTEM AND TECHNOLOGIES I


JANET PINTO
DARWIN G. RARALIO
INSTRUCTOR

Week 1- 8

INFORMATION TECHNOLOGY DEPARTMENT


Lesson I:
HTML VS. XHTML
Objectives
After this lesson the student should be able to:
1. Define what is HTML
2. Differentiate HTML vs XHTML

What is XHTML?
• XHTML stands for EXtensible HyperText Markup Language
• XHTML is a stricter, more XML-based version of HTML
• XHTML is HTML defined as an XML application
• XHTML is supported by all major browsers

Why XHTML?
XML is a markup language where all documents must be marked up correctly
(be "well-formed").
XHTML was developed to make HTML more extensible and flexible to work with
other data formats (such as XML). In addition, browsers ignore errors in HTML
pages, and try to display the website even if it has some errors in the markup.
So XHTML comes with a much stricter error handling.
The Most Important Differences from HTML
• <!DOCTYPE> is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory
• Elements must always be properly nested
• Elements must always be closed
• Elements must always be in lowercase
• Attribute names must always be in lowercase
• Attribute values must always be quoted
• Attribute minimization is forbidden
XHTML - <!DOCTYPE ....> Is Mandatory
An XHTML document must have an XHTML <!DOCTYPE> declaration.
The <html>, <head>, <title>, and <body> elements must also be present, and the
xmlns attribute in <html> must specify the xml namespace for the document.

XHTML Elements Must be Properly Nested. In XHTML, elements must always be


properly nested within each other, like this:
XHTML Elements Must Always be Closed. In XHTML, elements must always be
closed, like this:
XHTML Empty Elements Must Always be Closed. In XHTML, empty elements must
always be closed, like this:
XHTML Elements Must be in Lowercase. In XHTML, element names must always
be in lowercase, like this:
XHTML Attribute Names Must be in Lowercase. In XHTML, attribute names must
always be in lowercase, like this:
XHTML Attribute Values Must be Quoted. In XHTML, attribute values must always
be quoted, like this:
XHTML Attribute Minimization is Forbidden. In XHTML, attribute minimization is
forbidden:

Utilization of the <!DOCTYPE html> element.


It’s Code For Declaring A DOCTYPE In HTML5
The <!DOCTYPE html> declaration is used to inform a website visitor's browser that
the document being rendered is an HTML document. While not actually an HTML
element itself, every HTML document should being with a DOCTYPE declaration to
be compliant with HTML standards.
Hypertext Markup Language(HTML)
➢ HTML was originally developed by Tim Berners Lee while at CERN and
poularized by the Mosaic browers developed at NCSA.
➢ HTML standards are organized by W3C :http://www.w3.org/MarkUp/
➢ All web pages are written in HTML.
➢ HTML lets your format text,add graphics sound video and save it all in a Text
only or ASCI file that any computer can read.
➢ Hypertext is the technology that allows for links on the web on every web
page visit,There is likey a link to another documents .The URL is ismply the
web site name and the page. An example URL is www.google.com.
➢ Markup Languages provides format and structure to a document in HTML a
series of tags controls the markup.Each tag has a meaning .The browser will
read the tags controls the markup. Each tag has a meaning .The Browers will
read the tag and render the page appropriately. Tags are groupings of letters
or number surrounded by angle braces. An example tag is the heading 1,
<h1>

Other Web Languages


Cascading Style Sheet(CSS).CSS is the most important helper language
for HTML.It makes web pages look nice. Ideally , HTML will hold the
data for web page while CSS will describe how the documents looks.

Javascript .Java Script is a programming languages web developers use


javascript to create small programs that run within a web page. It is a
client side scripting languages which means these small programs run
on the computer viewing the pages.

Active server pages(ASP). ASP is a programming language that builds


dynamic web pages .ASP is a Microsoft product that runs on
Microsooft Operating system.ASP runs on a server and creates on
HTML. page based on the user requests. Since the code runs on a
server , ASP is a server side scripting Languages.
PHP : hypertext Preprocessor. PHP is another server side language
.It handles all of the same tasks as ASP. One big difference is the
system that can run PHP.PHP can run on any server not just Microsoft.

HTML Editors
Code Editors allow you to type code for your HTML page.
Notepad/Simpletext. Notepad is included with all version of Microsoft
Windows. Simpletext is included in Mac OS X. Both will allow you to
type a web pages .However, neither offers code highlighting or code
syntax.
Gedit.Gedit is included with most modern distribution of Linux .It
offers code Highlighting but not code hints.
Programmers Notepad. Programmers Notepad is a free program
available from www.pnotepad.org. It offers code highlighting in color
for nearly every programming language, and some code hints
.Additionally it offers a tab system to allow you to work on several
documents at the same time.
Taco HTML. Despite its odd name Taco HTML is a fully featured editor
for the MAC OS X .Is offers code completion ,syntax highlighting and
multiple tabs. Unfortunately it is not free.
Visit www.tacosw.com to download the 30 day trial.

WYSIWYG Editors allow fast developemt of web pages.


Adobe Dreamweaver. it is very fast produces beautiful pages and
manage most web site creatin.
Microsoft Expression Web .It is slightly less powerful than
dreamweaver nut it handles all of your web pages creation needs.

HTML Versiion
HTML 1.0( first draft)-1992
HTML 2.0(proposed standard)- September 1995
HTML 3.2 january 1997
added tables applets……
HTML 4.0 –December 1997
improved tables,forms,….
HTML 4.01- December 1999
slightly different from 4.0
XHTML 1.0 January 2000
Reformulation of HTML 4.01 AS AN XML application
Stricter and cleaner syntax formatting moved to CSS
XHTML 1.1 May 2001
“Modularization of XHTML”
HTML 5
Merges HTML and XHTML features

The new standard has deprecated several tags and introduced several new tags and
design elements.
Exercise 1: True or False
Student name: Course/Yr/Major:

Subject Teacher: Subject schedule:


Date submitted: Section:

Write true if the statement is correct and false, if the statement is wrong
1. In declaring a code in HTML 5 we must have “ <DOCTYPE>” in the beginning.
2. The first definition of PHP is personal homepage
3. HTML is a programming language
4. ASP stands for Active Server Pages
5. HTML lets your format text, add graphics sound video and save it all in a Text
only or ASCI file that any computer can read
6. Hypertext is the technology that allows for links on the web on every web
page visit.
7. Microsoft Expression Web is inferior to adobe Dreamweaver
8. TACO HTML is use in Windows and MAC OS
9. Notepad and TACO HTML is free to use
10.Meaning of HTML is Hypertext Markup Language.
Reference:
• https://www.w3schools.com/html/html_xhtml.asp
• https://html.com/tags/doctype/#:~:text=The%20<!,be%20compliant%20wi
th%20HTML%20standards.
Lesson II
W3C ORGANIZATION and HTML Rules
OBJECTIVES:
The students should be able to:
1. Define what is W3C Organization
2. Show awareness about the rules in making a website design.
3. Know different recommendations in creating a website design.

W3C ORGANIZATION
The World Wide Web Consortium (W3C) is an international community
where Member organizations, a full-time staff, and the public work together to
develop Web standards. Led by Web inventor and Director Tim Berners-Lee and
CEO Jeffrey Jaffe, W3C's mission is to lead the Web to its full potential

10 Rules of Website Design


1. Simple is good. Cramming too much into each page creates confussion
.Having to scan through rows of links and images to find what you are looking
for can be frustrating .We keep your pages clean so it will be easier for your
visitors to locate what they need,. Plus the pages will Load faster.
2. Design is paramount .When you meet someone for the first time ,you want
to make a good first impression.The same should be true for your web site.
The overall look and feel of the site is the first thing your visitors notice. That
is why all sites we create look professional and attractive.
3. Navigation Should be intuitive.There are few things more frustrating than
not being able to find what you are looking for on a Web site. pages should
be well- organized with a top down design so that people can easily browse
to where they want to go on your site.
4. Consistency is key .Visitors should’t feel like they have been sent to a
cpmpletely different Web Site each time they open a new page on your site
.Most peopleare accustomed to familiar layouts within Web Sites
Consistency among the pages on your sites makes navigation a much easier
task.
5. Color choice is critical .Color selection can make or break a site .Most of us
know what is it like to visit a site that is judt painful to look at when choosing
of colors,it is important to be consistent ,choose colors that don’t clash and
make sure there is a strong contrast betrween the text and the background
.White is the safest chopice for a background color ,but other colors can
work.
6. Don’t forget the content .Even if your site has an amazing design it will not
be productive if it lacks content. There needs to be enough content on each
page to make visiting it worth while.If a pages is extremely long it may be a
good idea to break it up into smaller ones.
7. Make use of the full browsers window. People with large monitors typically
don’t like seeing all the content of a web page crammed into one tenth of
the screen. Most sites created by sharpened production scale to fill the
browser window so that people with monitors of all size can make the most
out their screen real estate, if you end to use a fixed size you can count on
most visitors using a resolution of at at least 1024*768.
8. Developed for multiple browsers Despite what Microsoft would like you to
believe not everybody on the web uses internet explorer on a windows
based PC.That is why we check our site in multiple browsers on multiple
platforms to make sure everything appears uniformly its is always best to
catch problems ahead of time instead of relying on visitors complaints.
9. Check The site for errors.As any experienced editor will tell you a wonderful
piece of work can be greatly tarnished by a single small error. For website
this includes types broken links and images that do not show up correctly.
Sharpened productions is meticulous when editing your site.
10.Write your own code. Through we typically use Adobe Go live to create your
pages layout we also follow and edit the HTML.that is being generated ,When
it comes to web scripting we write everything from scratch .While some
people tend to grab pre –written scripts fpr every action they need they are
clueless when something goes weong or doesn’t work .It is also easier to
costumize the code we write allowing us to avoid the template appearance
of many other sites on the web.
Important Recommendations in designing Web Pages

1. Sign and date your pages


User needs to know whether web page is Up to date and where to send
corrections and question. Be sure to include other pertinent e-mail
addresses: A departmental web page should include not only the
webmaster’s e-mail address, but also contact information for key staff in the
department.
2. Be sensitive to user of different web browsers.
Make sure that you don’t unintentionally cut off your audience by using new
HTML features which cannot be handled by all browsers’ should determine
your audience .If you intend to reach users at ASC only you may choose to
use HTML . Features associated with browsers ASC are using .But if you
intend to reach a worldwide audience ,It may be best to conform to a more
widely accepted standard.
3. Examine your web pages on a variety of platforms
A page which looks great using the computer on your desk may look terrible
in other environment. If you wish to reach a wide audience , be sure that
your pages can be viewed under variety of circumstance:
On small screens
On black and white screens
On older or poorly tuned monitors
4. Be careful about your image size and color requirement
Download each 10k may take 3 seconds or more for a 20.8 kpbs dail- up
sever.You can limit the size of your image resolution .Recommended : 72 dpi
resolution ,Which permits a maximum palette of 256 colors.
5. Don’t use distracting or illegible backgrounds
Solid Colors with highly contrasting text are safer and the standard gray is
the safest of all.
Background images will make your text illegible on some monitors Aside
from degrading the legibility of your text a very busy background may make
the user weary of reading your pages.
6. Include context in the <TITLE>
user may come to a page from anywhere especially those who use a search
engine. Don’t use a title like “Course Offered “ when you can provide what is
seen in the bookmark –descriptive unique :relatively short(50-60 characters)
7. Provide links among Related pages
8. Don’t say “click here”
Example: Apayao State College is located in CAR and you can get by Clicking
here.
9. Provide text alterations for images .
For the benefit of user of non –graphical browsers (like lynx) as well as for
user of graphical browsers who have image loading turned-off always use
the ALT option of the <IMG> tag to specify text which can be used in place of
images .
<IMG SRC=” upArrow.gif” ALT =”Up”
“A picture is worth a thousand clicks .”

Some users turn –off image loading even if their software can display images
(especially if they are using a modem or have a slow connection)
10.Don’t abandon your web pages
People turn to the WWW for current information .Don’t think of producing
a web page as a one time task but an ongoing project.
However there are parts of your page that are static files (like the biography
of Rizal) no updating is probably needed. But for documents that are time –
sensitive-update!
Exercise 2
Student name: Course/Yr/Major:

Subject Teacher: Subject schedule:


Date submitted: Section:

Enumeration: (10 pts)


• List 10 important recommendations in designing a webpages and
explain it base on you own understanding.

Essay (10 pts)


• Explain what is W3c, goals and objectives.
Reference:
✓ https://www.w3.org/Consortium/#:~:text=The%20World%20Wide%
20Web%20Consortium,Web%20to%20its%20full%20potential.
Lesson III:
Structuring Document for the Web

Objectives
After this the students should be able to:
1. Create a simple webpage
2. Use more tags and elements to fine tuned their web page

Web Site Design

There are fundamental comceptual and organizational reason for


subdividing any large body of information whether it is delivered on the
printed page or in a world wide web site.

Four Important Structure of site Structure:

(a ) Sequence

simplest way to organize information is in a sequence , where you present a


linear narrative .as we can see in the above figure,Information that naturally
flows as a narrative ,timeline or in logical order nis deal for sequential
treatment.Sequential ordering may be chronological a logical topics
progressing from the general to the specific or even alphabetically
sequenced as in indexes encyclopedias and glossaries .Howeveer simple
sequential organizational usually only works for smaller sites.
(b) Grid
Many procedural manual, like lists of university course, or medical case
descriptions are best organized as grid. Grids are 3

To be useful, the individual units in a grid must share a highly uniform structure of
topics and subtopics. The topics often have no particular hierarchy of importance.
For example, “tuberculosis” is not more or less important a diagnosis than “hilar
adenopathy”, but ideally both case descriptions would share a uniform structure of
subtopics. Thus the user, could follow the grid “down”, reading about tuberculosis,
or cut “across” the grid perhaps b comparing the ‘diagnostic imaging” sections of
both hilar adenopathy and tuberculosis.

Unfortunately, grids can be difficult to understand unless the user recognizes the
interrelationships between categories of information, and so are probably best for
experienced audiences who already have a basic understanding of the topic and its
organization. Graphic overview maps are very useful in grid-like Website.
C
Hierarchical
Information hierarchies are one of the best ways to organize complex bodies of
information. Hierarchical organization schemes are particularly well suited to
Websites, because web sites should always be organized as an outcome of a single
home page. most users are familiar with hierarchical diagrams, and find the
metaphor easy to understand as navigational aid. A hierarchical organization also
imposes a useful discipline in your won analytical approach to your content, as
hierarchies only work well when you have thoroughly organized your material.
Since hierarchical diagrams are so familiar in corporate and institutional life, users
find it easy to build mental models of the site.
Web
Web -like organizational structure poses few restrictions on the pattern of
information use. The goal is to duplicate associative though and fee flow of ideas,
where users follow their interest in a pattern unique to each person who visits the
site. This organizational pattern develops in a web site with very dense links both
to other information within the site, and information on other world wide web site.
The goal is to fully take advantage with the web’s power of linkage and association,
but web-like organization structures can just as easily propagate confusion about
the interrelationships of your information chunks. Ironically, organizational webs
re often the most impractical structure for web site, because they are so hard for
the user to understand and predict.

Webs work best for small sites dominated by list of links, aimed at highly deducted
or experienced users looking for further education or enrichment, not for a basic
understanding of your topic.

Site Elements
Web site can vary enormously in their style, content, organization, and purpose,
but all web sites that are primarily designed to act as information resources share
some basic characteristics.

1. Home page
All web sites are organized around a “home page” that acts as a point of entry
into the complex web pages in a site. In hierarchical organizations, home
page sits at the tope of the chart, and all pages in Web site should contain a
direct link back to the home pages.

2. Menus & Submenus


Unless your site is very small you will probably need a number of submeny
pages that the user enters from general category listing on your home page.
It is not practical to load up the home page of a website with dozens of links.
The page gets too long to load in a timely manner, and the complexity of long
pages may be off-putting to many users.
Each major submenu becomes a mini home page for that section of your web
site. For specialized, detailed menus, you may encourage frequent users to
link directly to a submenu in your web site. Thus, the submenus could
become alternate home pages oriented to specific group of users.

3. Graphic or text menus


The most basic layout decision you will make about your home page
concerns how heavily you will use graphics on the page. I the case of most
corporate, institutional, and education home pages display at least a small
graphic banner across the top of the home page, and in commercial sites the
trend is rapidly moving toward menus contracted from complex graphics
that emulate the look.
Strong graphics can be effective at grabbing a browser’s attention, large
graphic menus impose long loading time for pages, especially for users
linking to the internet via modems or slower network connections.

4. Updates
Many web sites must be frequently updated so the information doesn’t get
stale. But the presence of the new information may not be obvious to
readers on a web site unless there is a systematic effort to let them know
about it. If items listed on the menus on you home page are updated you
coul just put a “NEW” graphic next to each updated item. You should also
date everyone your web pages, and update that as information changes so
that users can be sure that they have the lates version of things.

5. Bibliographies, Indexed, Appendices


The concept of “documents” in electronic environments like the Web pages
is often flexible, and the economics and logistics of digital publishing make it
possible to provide more information to your site users withour the costs
associated with paper documents.
6. Frequently Asked Questions (FAQ) Pages
The web and other internet-base media have evolved a unique institution,
the FAQ, or “ Frequently Asked Questions” page where the most commonly
asked questions from users are listed along with answers. FAQ web pages
are ideal for web sites designed to provide support and information to a
working group with an institution, or to a professional or trade group that
maintaining in a central foodie staff.

Site covers
Site covers can serval a number of different purposes. Some function as “
Splash” screens that offer little information, but are intended to attract users
into a site by using colorful graphics or effects. Others are used to establish
an overall “look-and-feel” for a site. Such covers often provide links to the
major section of the site, allowing visitors quick access to topics of interest
while providing a general site overview. Other covers have few graphics, but
provide detailed information and access to the content of the site.

1. Information
An information site, such as academic, corporate, or general interest site,
should have a cover that establishes an overall visual design theme for
the site. It should also identify and give a brief explanation of the purpose
of the site, and provide a site overview by presenting links to its major
sections.
2. Reference
Example: yahoo.com

A site that will b e used as reference should have its menu posted right
on the front door. Visitors should be able to tell at a glance if the
information they are seeing is inside, and if so, exactly where to find. A
cover to a reference site should look more like a table of contents, with
links to every page in the site. This type of cover can have graphic
elements, but their role is secondary to a site identity that is maintained
throughout all pages.

3. All the rest


The third type of site cover is one that elicits questions that can be
answered only by entering the site. These covers use animations,
graphics, and/or multimedia to stimulate interest and draw visitors into
the main body of the site. The success of these covers depends
enormously on the exception of the site visitor.

HTML TAGS VS ELEMENTS


Elements give structure to a html .document and tell the browers how
you want your website to be presented .Generally elements consist of
a start tag some contents and end tag e.g <p> some text</p>.
A block –level element is an element that creates large blocks of
ccontent like paragraphs or page division.They start bnew lines of text
when you use them and can contain other blocks as well as inline
elements and text or data.
An inline elements is an element that defines text or data in the
document like STRONG makes the enclosed text strongly emphasized
and Q says the enclosed text is a quotation .They don’t new lines when
you use them,and they generally only contain other inline tags and
text or data.Or they include nothing at all like the BR tags.
there is also a third type of elements in HTML Those that aren’t
displayed at all. These tags are the ones that provide information
about the page but don’t necessarily show up in the visible portion of
the page.For example : STYLE to define style and stylesheets META to
define Meta data and HEAD to hold those elements.
Tags are labels you use to mark up the beginning and end of an
element all tags have the same format : they begin with a less than
sign “<”and end with a greater than sign “>”.
Generally speaking there are two kinds of tags opening tags <html>
and closing tags: </html> . The only difference between an opening
tag and the ac closing tag.
Therefore the term tag is normally used when referring to the mark up
in the serialized for an HTML document and the term element
typically refers to the internal representation of an HTML object as a
node in the documents hierarchical object model,encompassing all of
its descendants.

HTML Properties vs Attributes


An attribute inn HTML is named property associated with an element
as coded in the serialized name /value paire can be code I a start tag
or a standalone tag between the element name and the tags
terminating > or />delimeter spearted from the element name and
other attributes by name an equal sign (=) and the value of the
propery enclosed in quates even in the attributes is a Boolean
attribute.
A property is name characteristic of something in the internal model
of an HTML document. The value of the property may be set by an
attribute in the serialized form of an element,inherited from a parent
element in the hierarchical model of the document or set to some
default value.

SGML
Standard Generalized Markup Language (SGML) is a system for
defining markup Languages. Authors mark up their documents by
representing structural, Presentational and semantic information
alongside content.HTML is one example of a markup languages.Here
is an example of an HTML document:
<DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http :// www.w3.org/TR/ html4/ strict.dtd”>
<HTML>
<HEAD>
<TITLE> My first HTML document</TITLE>
</HEAD>
<BODY>
<P>Hello World!
</BODY>
</HTML>
Each markup Languages defined in SGML is called an SGML application
.an SGML application is generally characterized by:
1. An SGML declaration .The SGML declaration specifies which characters and
delimiters may appear in the application
2. A document type definition (DTD). The DTD defines the syntax of markup
constructs.The DTD may include additional definitions susch as character
entity references.
3. A specification that describe the semantic to be ascribed to the mark up.This
specification also imposes syntax restriction that cannot be expressed within
the DTD.
4. Document instances containing data (content) and markup. Each instance
contains a reference to the DTD to be used to interpret it.

SGML contructs used in HTML


1. Elements
An SGML document type definition declares element types that represent
structures or desired behavior .HTML includes element types that represent
paragraphs, hypetext links , lists tables images etc.

Each element type declaration generally describes three parts: a start tag,
content and an end tag.

The elements name appears in the start tag (written <element-name>) and
the end tag (written </element-name>); note the slash before the elements
name in he end tag. for example the start and end tags of the UL element
type delimits the item in a list:
<UL>
<LI><P>…list item 1…
<LI><P>…list item 2…
</UL>
Some HTML element types allow authors to limit end tags (e.g., the P and LI
elements types). a few elements types also allow the start tags to be omitted;
for example,HEAD AND BODY .the start and end tags of the UL elements ype
delimit the items in a list:
Some HTML element types have no content .For example the line break element
BR has no content; its only role is to terminate type definition and the text of the
specification indicate whether an element type is empty (has no content)or if it can
have content ,what is considered legal content.
Element names are always case –insensitive.
Please consult the SGML standard for information about rules governing
elements(e.g., they must be properly nested an end tag closes back to the matching
start tag,all unclosed intervning start tags with omitted end tags
(section7.5.1),etc.).
For example ,the following paragraph:
<P> This is the first paragraph.
…a block element…
may be rewritten without its end tag;
<P> This is the first paragraph.
. . . a block element . . .
since the <p> starttag is closed by the following block element. Similarly, if a
paragraph is enclosed by a block element,as in:
<DIV>
<P> This is the paragraph.
</DICV>
The end tag of the enclosing block element(here ,</DIV>)implies the end tag pf the
open <P>start tag.
Elements are not tags.Some people refer to elements as tags(e.g.,”the P tag”).
Rememberthat the elements is one thing and the tag (be it start or end tag) is
another. for instance the HEAD element is always present even though both start
and end HEAD gas may be missing in the markup.
2. Attributes
Elements may have associated properties called attributs which may have
values (by default or set by authos or scripts). Attributs /value pairs appear
befor the final “>” of an element start tag. any number of (legal) attribute
value pairs separted by sapces may appear in an eloement start tag. They
may appear in nay order .

Example:

<H1 id=”section1”>
Thiss is an identified heading thanks to the is attribute
</H1>
By default , SGML requires that all attributes values be delimited using either
double quotation marks (ASCII decimal 34) or single quotation marks ( ASCII
decimal 39).singlr quate marks can bee included within the attribute value
when the value is delimited by double quate marks,and vice versa. Authors
may also use numeric character references to represent double quates
(&#34) and single quates (&#39;).For double quates double authors can also
use the character entity reference &quot;.

In certain cases authors may specify the value of an attribute without any
quattaion marks.The attribute value may only contain letter(a-z and A-
Z).digits (0-9) hyphens (ASCII decimal 45), periods (ASCII decimal 46),
underscores (ASCII decimal 95) and colons (ASCII decimal 58)we recommend
using quotation marks even when it is possible to eliminate them.

Attribute names are always case –insensitive.


Attribute values are generally case-insensitive.The definition of each
attribute in the reference manual indicates whether its value is case –
insensitive.
3. Character References
Character references are numeric or symbolic names for characters that may
be included in an HTML document .They are useful for referring to rarely
used characters or those that authoring tools make it difficult or imposible
to enter. You will see character reference throughtout this document ; they
begin with a”&” sign and end with a semi-colon(;).Some common examples
include:
“&lt;”represent the ,<sign .
“&gt;”represent the >sign.
“&quot;”represent the “mark.
“&#229;”(in decimal) represent the letter “a” with a small circle above
it.
“&#1048;”(in decimal)represent the Cyrillic capital letter”I”.
“&#x6C34;”(in hexadecimal ) representsthe Chinsese character for
water.
4. Comments
HTML comments have the following syntax:
<!—this is a comment -->
<! – and so is this one,
which accupies more than one line -->

White space is not permitted between the markup declaration open


delimiter(“<!”) and the comment open delimiter (“—“),but is permitted
between the comment close delimeter(“—“) and the markup declaration
close delimeter(“>”).A common error is to include a string of hyphens(“--)
within a comments ..Authors should avoid putting two or more adjacent
hyphens inside comments.

Information that appears between commentsb has no special meaning (e.g.,


character reference are not interpreted as such ).
Note that comments are markup.
<! DOCTYPE HTML PUBLIC “--//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd>

<! DOCTYPE HTML,PUBLIC “--//W3C//DTD HTML 4.01 Transitional //EN”


http://www.w3.org/TR/html4/loose.dtd>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional // EN “


http://www.W3.org/TR/html4/frameset.dtd>

Fine tuning your text

Choosing a Text Editor

Essentially there are two ways to write HTML., with a “ What You see is what
you Get”(WYSIWYG) editor or with a text editor .

WYSIWYG Editor Benefits


Ease .One of the best things about most WYSIWYG editors is that I can be up
and running quickly. Most of these editors work like a typical word processor
so there isn’t a lot of time spent learning a new program.

Speed: Unless you have been writing HTML for several years ,most
WYSIWYG editors will help you create web pages Faster.

HTML Validation. If you use a WYSIWYG editor, you can be sure that your
HTML will work in most browsers and usually be accurate HTML (with some
notable exceptions).

Other Features.Most WYSIWYG HTML editors offer additional features to


make your site better or increase your productivity .For example link
checking; spell checkers document weighting javascript functions DHTML
tips and more.
TEXT EDITOR BENEFITS
Flexibility .Once you have learned to write HTML with a text editor,You will
be more conversant with what HTMAL can and cannot do. You will not be
limited to the functions of the editor .

Portability. If you do HTML on a text editor you can make changes anywhere
that you can get access to your pages.Most text editors are fairly similar
across platforms, and if you use Notepad that is availabale on all Windows
machines.

Clean HTML. Many HTML editors add storage codes tags,and attributes into
the HTML. These can slow down the download of the page by adding
extraneous characters create pages that are only viewable by one browser
and add in unnecessary tags. By writing HTML in a text editor you ensure that
you only use HTML in a text editor,you ensure that you only use HTML tags
that you intend to use.

PARAGRAPH FORMATTING

BLOCK –LEVEL ELEMENTS


• <p>…</p> -defines paragraph.
example :
<p>This is a paragraph .<br />
still the same paragraph .</p>
<p>This is another paragraph.</p>
• <blockquote>…</blockquote> -marks the enclosed text as a block
quotation .
Example :
<blockquote
cite=http://www.bibliomania.com/fiction/joyce/ulysses/telemac.ht
ml>
<p>
He pointed his finger in friendly jest and went over to the
parapet,<br/>laughing to himself .stephen dedalus stepped
up,followed him werily <br/>half way and sat down on the edge of
the gunrest ,watching him still as <br />lathered cheeks and neck.
</p>
</blockquote>
• <address>…</address> - marks the text within the tag as an address
or other contact information usually for the personor team
responsible for the current document.
Example:
<address>
Maintained by:<br/>
<a href=mailto:johndoe@com>John Doe</a><br />
555-1212
</address>

• <center>…</center> - Causes the enclosed content to be centered


horizontally on the page or inside the parent element.
Example:
<center>
<p> This paragraph is centered. </p>
<center>
• <del>…</del> - mark the enclosed content as deleted. This element is useful
in marking changes from one version of a document to the next. Through
style sheets, authors can suggest an appropriate rendering, such as not
displaying the deleted content or rendering the text with a strike-through
style.
Example:
<del>James</del>Tom is my best friend.
• <div>…</div> - defines a generic block-level container, allowing authors to
provide style or language information to blocks of content. The element may
contain any inline or block-level element, including another div.
Example:
<div class = “navbar”>
<p>The contents of the navigation bar. </p>
</div>
• <h1>….</h1> - <h6> - Marks the enclosed text as a heading. h1 marks a level
one heading;h2, a level-two heading; and so forth, up to h6.
Example:
<h1>Tyron Prime </h1>
<h2>Chapter 1</h2>
<p>Call me Sonny…</p>
• <hr/> - inserts a horizontal rule- a horizontal line often used to separate
areas of a document.
Example:
<p>text above the rule </p>
<hr width = “80%’ size = “5” noshade />
<p>text below the rule </p>
• <ins>…</ins> - Marks the enclosed content as inserted.
Example:
<del>James</del><ins>Tom</ins> is my best friend.
• <isindex/> - inserts a one-line text input.
Example:
<isindex prompt = “Your Input:” />
• <noscript>…</noscript> - provides alternate content for a client-side script
that was non executed.
Example:
<script type = “text/javascript”>
<! - -
Document.write(“Your browser supports Javascript.”)
//- - >
</script>
<noscript>Your browser does not seem to support Javascript.</noscript>
• <pre>…</pre> - marks the enclosed text as preformatted text
Example:
<pre>
Class HelloWorld {
Public static void main (String[] args) {
System.out.println(“Hello World!”);
}
}
</pre>

INLINE ELEMENTS
• <b>…</b> or <strong>…</strong> - Causes the browser to render the
enclosed text in bold type.
Example:
<b> This text is bold.</b>
• <big>…</big> - Causes the browser to render the enclosed text in larger
type.
Example:
<big> This text is big.</big>
• <i>…</i> or <em>…</em> - Causes the browser to render the enclosed text
in italic type.
Example:
<i>This text is italic.</i>
• <s>…</s> or <strike>…</strike> - Causes the enclosed text to be rendered
with a strikethrough style.
Example
My best friend is <s>John</s> Paul.
• <small>…</small> - causes the browser to render the enclosed text in
smaller type.
Example:
<small>This text is small.</small>
• <tt>…</tt> - causes the browser to render the enclosed text in a monospace
font.
Example:
<tt> This text is monospaced.</tt>
• <u>…</u> - Marks the enclosed text to be rendered as underlined text.
Example
This <u>word</u> is underlined.
• <var>…</var> - Marks the enclosed text as a variable or program argument.
Typically rendered in italics by browsers.
Example:
The variable <var>x</var> is used here.
• <samp>…</samp> - Marks the enclosed text as sample output, such as from
a computer program. Typically rendered as monospaced text by browsers.
Example:
<p>When an undefined element is used in an HTML, document, a validator
will five an error like the following:</p>
<p>
<samp> NSFMLSU.EXE:test.html:4:7:E: element “FOOBAR” undefined
</samp>
</p>
• <kbd>…</kbd> - marks the enclosed text as text to be entered by the user.
Typically rendered as monospaced text by browsers.
Example:
To proceed,enter<kbd> Yes</kbd> at the prompt.
• <dfn>…</dfn>-marks the defining instance of the enclosed term. Typically
rendered italics by browsers.
Example:
<dfin>Ichthyology</dfn>is the study of fish.
• <code>…</code> - marks the enclosed text as computer code. Typically
rendered as monospaced text by browsers.
Example:
<pre><code>
Class HelloWorld {
Public static void main (String [] args){
System.out.println(“Hello World!”);
}
}</code></pre>
• <cite>…</cite> - marks the enclosed text as a citation (such as a book
title).Typically rendered by browsers in italics.
Example:
I recently read <cite> The Grapes of Wrath </cite>
• <acronym>…</acronym> - Marks the text within the tag an acronym. When
used with the title attribute, acronym allow browsers to display the
acronym’s expansion as a tooltip.
Example:
<acronym title = HyperText Markup Language”> HTML </acronym>
• <abbr>… </abbr> - Marks the text within the tag as an abbreviation. When
used with the title attribute, abbr is useful for aural (text- to – speech)
browsers, spell checkers, translator and other software.
Example:
<abbr title = United Nations”> UN</abbr>
• <br/> - forces a line break in the current line
Example:
This line has<br/> a forced break.
• <font>…</font> -Specifies font face, size, and/or color for enclosed text.
<font face = “Verdana,Arial” size “+1” color=”red”>
We recomment using styles instead.
</font>
• <q>…</q> - Marks the enclosed text as brief quotation.
Example:
<p> She said, <q>I was here yesterday.</q></p>
• <span>…</span> - the span element is a generic inline container. It is
typically used to group inline elements together for the purpose of applying
a style to them as a group.
Example:
<p>How do you put <span style = “border:thin solid”> words in a box
</span>?</p>
• <sub>…</sub> - marks the enclosed text as a subscript. Subscripts are
generally rendered with lowered baseline and in a smaller font than ordinary
text.
Example:
H<sub>2</sub>0 is water.
• <sup>…</sup> - Marks the enclosed text as superscript. Superscripts are
generally rendered with a raised baseline and in a smaller font than ordinary
text.
E=mc<sup>2</sup>, according to Einstein.

The following are attributes of a block-level and an inline elements used in


paragraph formatting
Optional attributes of the paragraph element
Attribute Values Description
Align Left Specifies the horizontal alignment of the
Center paragraph’s content. Deprecated in favor of the CSS
Right text – align property.
Justify

Optional attributes of the div element


Attribute Values Description
align Left The horizontal alignment of the div’s content.
Center Deprecated; use style instead.
Right
Justify

Optional attributes of the h1-h6 element


align Left Specifies the horizontal alignment of the heading.
Center Deprecated in favor of styles.
Right
Justify

Optional attributes of the hr element


align Left Specifies the horizontal alignment of the rule
Center
Right
noshade [none] Specifies that the rule be rendered as a solid line
rather than a “groove”.
size pixels The thickness in pixels of the rule.
width Length The width of the rule in pixels or percentage.

Optional attributes of the br element


Clear Left Forces the content after the break to start below a
Right floating object(typically an image or a table.)
all

Optional attributes of the font element


Face CDATA A comma-separated list of font face name. the first
font available to the browser will be used
Size CDATA The font size on a browser-based scale from 1 to 7.
If basefont is in use, you can also specify an
incremental size change such as “+1” or +-1”.
Color Color The font color
Exercise 3
Student name: Course/Yr/Major:

Subject Teacher: Subject schedule:


Date submitted: Section:

Make a simple webpage


1. Go to notepad and paste this syntax
<HTML>
<HEAD>
<TITLE> My first HTML document</TITLE>
</HEAD>
<BODY>
<P>Hello World!</p>
</BODY>
</HTML>
2. Save it using your full name followed by “-my expectation” and .html as your
file extension
Eg. JanetMPinto-my expectation.html

3. Run your saved html document using any browser


4. Analyze and change the body of the html page.
5. Write your expectation in this subject in html format

Note: You can use notepad as your text editor and use browser to see your
output.
Reference:
✓ https://www.geeksforgeeks.org/tags-vs-elements-vs-attributes-in-html/
✓ https://www.w3schools.com/html/html_elements.asp
Lesson IV:
Working with HTML and CSS
Objectives:
After this lesson the students should be able to:
1. Use CSS codes to immediately design their HTML output
2. Identify which tags to consider as their specifier when designing an HTML
page.
3. Construct a webpage using HTML and CSS

What is CSS?
• 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

Why Use CSS?


CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.
CSS Example

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of large
websites, where fonts and color information were added to every single page,
became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!s

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.


With an external stylesheet file, you can change the look of an entire website by
changing just one file!

CSS Syntax
A CSS rule-set consists of a selector and a declaration block:

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.
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship
between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)
• This page will explain the most basic CSS selectors.

CSS element selector


The element selector selects HTML elements based on the element name.

CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific


element.

The id of an element is unique within a page, so the id selector is used to select one
unique element!

To select an element with a specific id, write a hash (#) character, followed by the
id of the element.
Note: an id cannot start with a number

CSS class Selector


The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the
class name

CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.
CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style
definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style
definitions):
Exercise 4.
Student name: Course/Yr/Major:
Subject Teacher: Subject schedule:
Date submitted: Section:

1. Create a simple webpage using HTML and CSS


• Change the elements other than the elements given in this example
• Put a paragraph in the body about yourself
e.g.
References
✓ https://www.w3schools.com/css/css_selectors.asp
✓ https://www.w3schools.com/css/tryit.asp?filename=trycss_grouping
Lesson V.
Working With tables and its child tags
Objectives:
After this lesson the student should be able to:
1. Use a <table> tag to create a webpage layout
2. Identify the properties and values to be used in designing the table layout
using css.
3. Construct a webpage layout using <table> tag be with its child
tags and design it with using CSS

HTML Tables

Define an HTML Table

The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. 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.

Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

CSS Tables
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for <table>, <th>, and <td> elements:
Full-Width Table
The table above might seem small in some cases. If you need a table that should
span the entire screen (full-width), add width: 100% to the <table> element:

CSS Table Size


Table Width and Height
The width and height of a table are defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the
<th> elements to 70px:
CSS Table Alignment
Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or center) of
the content in <th> or <td>.
By default, the content of <th> elements are center-aligned and the content of <td>
elements are left-aligned.
To center-align the content of <td> elements as well, use text-align: center:

CSS Table Style


Table Padding
To control the space between the border and the content in a table, use the
padding property on <td> and <th> elements:

Example code:
<!DOCTYPE html> <th>Contact</th>
<html> <th>Country</th>
<head> </tr>
<style> <tr>
#customers { <td>Alfreds Futterkiste</td>
font-family: Arial, Helvetica, sans- <td>Maria Anders</td>
serif; <td>Germany</td>
border-collapse: collapse; </tr>
width: 100%; <tr>
} <td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
#customers td, #customers th { <td>Sweden</td>
border: 1px solid #ddd; </tr>
padding: 8px; <tr>
} <td>Centro comercial
Moctezuma</td>
#customers tr:nth- <td>Francisco Chang</td>
child(even){background-color: <td>Mexico</td>
#f2f2f2;} </tr>
<tr>
#customers tr:hover {background- <td>Ernst Handel</td>
color: #ddd;} <td>Roland Mendel</td>
<td>Austria</td>
#customers th { </tr>
padding-top: 12px; <tr>
padding-bottom: 12px; <td>Island Trading</td>
text-align: left; <td>Helen Bennett</td>
background-color: #4CAF50; <td>UK</td>
color: white; </tr>
} <tr>
</style> <td>Königlich Essen</td>
</head> <td>Philip Cramer</td>
<body> <td>Germany</td>
</tr>
<table id="customers"> <tr>
<tr> <td>Laughing Bacchus
<th>Company</th> Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari
Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>

</body>
</ht
Exercise 5
Construct a web calendar based on their birth month and must highlights the following:
• Birthday
• Sundays
• Holidays References

0
References
✓ https://www.w3schools.com/css/css_table.asp
✓ https://www.w3schools.com/html/html_tables.asp

1
Lesson VI
Working with BOOTSTRAP and JQUERY
Objectives
After this lesson the students should be able to
• Know how to link bootstrap and JQUERY in HTML
• Know how to call classes and ids in bootstrap
• Construct a webpage using alert, buttons, badge, breadcrumbs classes and be with their child
classes using bootstrap
• Know the structures of classes to be called from bootstrap

What is Bootstrap?
Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons,
tables, navigation, modals, image carousels and many other, as well as optional JavaScript
plugins
Bootstrap also gives you the ability to easily create responsive designs
What is Responsive Web Design?
Responsive web design is about creating
web sites which automatically adjust
themselves to look good on all devices,
from small phones to large desktops.

2
One advantage of using the Bootstrap 4 CDN:
Many users already have downloaded Bootstrap 4 from MaxCDN when visiting another site. As
a result, it will be loaded from cache when they visit your site, which leads to faster loading
time. Also, most CDN's will make sure that once a user requests a file from it, it will be served
from the server closest to them, which also leads to faster loading time.

jQuery and Popper?


Bootstrap 4 use jQuery and Popper.js for JavaScript components (like modals, tooltips,
popovers etc). However, if you just use the CSS part of Bootstrap, you don't need them

Downloading Bootstrap 4
If you want to download and host Bootstrap 4 yourself, go to https://getbootstrap.com/, and
follow the instructions there
Create First Web Page With Bootstrap 4
1. Add the HTML5 doctype
Bootstrap 4 uses HTML elements and CSS properties that require the HTML5 doctype.
Always include the HTML5 doctype at the beginning of the page, along with the lang attribute
and the correct character set:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>

3
2. Bootstrap 4 is mobile-first

Bootstrap 4 is designed to be responsive to mobile devices. Mobile-first styles are part of the
core framework.

To ensure proper rendering and touch zooming, add the following <meta> tag inside
the <head> element:

<meta name="viewport" content="width=device-width, initial-scale=1">

The width=device-width part sets the width of the page to follow the screen-width of the
device (which will vary depending on the device).

The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.

3. Containers

Bootstrap 4 also requires a containing element to wrap site contents.

There are two container classes to choose from:

1. The .container class provides a responsive fixed width container


2. The .container-fluid class provides a full width container, spanning the entire width of
the viewport

The

following example shows the code for a basic Bootstrap 4 page (with a full width container):

4
The following example shows the code for a basic Bootstrap 4 page (with a
responsive fixed width container):

5
Exercises 6

Create your own first bootstrap page


• Content must be one of your favorite music lyric and an explanation why you
love the song

6
References:
✓ https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-
and-best-practices/
✓ https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

You might also like