Scribd
Upload
7 views22 pages

Web Coding Standards & Marking Up Documents

The document outlines web coding standards focusing on HTML structure, formatting, and semantic usage. It emphasizes the importance of consistent indentation, naming conventions, and organizing files logically. Additionally, it covers various HTML elements such as paragraphs, headings, lists, quotations, and figures, providing examples for each.

Uploaded by

abby moral
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
7 views22 pages

Web Coding Standards & Marking Up Documents

The document outlines web coding standards focusing on HTML structure, formatting, and semantic usage. It emphasizes the importance of consistent indentation, naming conventions, and organizing files logically. Additionally, it covers various HTML elements such as paragraphs, headings, lists, quotations, and figures, providing examples for each.

Uploaded by

abby moral
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/ 22

THYNK UNLIMITED

WE LEARN FOR THE FUTURE

WEB CODING
STANDARDS
OBJECTIVES:
At the end of this lesson, you
are expected to achieve the
following objectives for this
session:
Ensure that HTML documents
adhere to a consistent structure,
including proper use of the <html>,
<head>, and <body> elements.
Apply consistent naming
conventions for classes and IDs and
use them effectively for styling
and scripting.
1.INDENTATION AND FORMATTING
Use consistent
indentation (usually with
2 or 4 spaces) to
enhance code readability.
Properly format your
code with line breaks
and spacing to improve
clarity.
2. HTML STANDARDS
Use lowercase for HTML tags and
attributes to maintain consistency.
Close all HTML tags and avoid using
self-closing tags non-void elements.
Include relevant attributes, such as
alt attributes for images and labels
for form inputs.
Use semantic HTML Tags (e.g.
<header>, <nav>, <main>, <footer> ) to
convey the meaning and structure of
the content.
3. FILE FOLDER STRUCTURES
Organize your files and
folders in a logical manner.
Use meaningful names for
files and folders to quickly
identify their purpose.
Keep related files together
separate different concerns
(e.g., CSS, JavaScript,
images).
THYNK UNLIMITED
WE LEARN FOR THE FUTURE

MARKING UP
DOCUMENTS
PARAGRAPHS <p>....</p>
A paragraph element

Paragraphs are most


rudimentary elements of a text
document
You indicate a paragraph with
the p element by inserting an
opening <p> tag at the
beginning of the paragraph and
a closing </p> tag after it
HEADINGS
There are actually six
levels of headings, from
h1 to h6
when you add headings
to content, the browser
uses them to create a
document outline for the
page.
LISTS
Human are natural list
makers, and HTML
provides elements for
marking up three types of
lists:
Unordered Lists
Ordered List
Description List
1.UNORDERED LIST
Collection of items
that appear in no
particular order
<ul> ......</ul>
Unordered List

<li> ......</li>
List item within an unordered list
UNORDERED LIST
<ul>
<li> <a href= “ “ >Serif</a> </li> Serif
<li> <a href= “ “ Sans-serif </a> </li> Sans- serif
<li> <a href= “ “Script </a> </li> Script
<li> <a href= “ “ Display </a> </li> Display
<li> <a href= “ “ Dingbats</a></li> Dingbats
</ul>
2.ORDERED LIST
List in which the
sequence of the
items is important
<ol> ......</ol>
Ordered List
<li> ......</li>
List item within an ordered list
<dd> ......</dd>
A value, such as a description or definition
ORDERED LIST
<ol>
<li> Gutenburg develops moveable type (1450s) </li>
<li> Linotype is introduced (1890's) </li>
<li> Photocomposition catches on (1950s) </li>
<li> Type goes digital (1980s) </li>
</ol>

1. Gutenburg develops moveable type (1450s)


2. Linotype is introduced (1890s)
3. Photocomposition catches on (1950s)
4. Type goes digital (1980s)
3.DESCRIPTION LIST
Lists that consist of
name and value pairs,
including but not limited
to terms and definitions.
<dl> ......</dl>
A Description List
<dt> ......</dt>
A name, such as a term or label
DESCRIPTION LIST
<dl>
<dt>Linotype</dt>
<dd> Line-casting allowed type to be selected,used,thenrecirculated into
the machine automatically. This advance increased the speed of
typesetting and printing dramatically.</dd>
<dt>Photocomposition</dt>
<dd>Typefaces are stored on film then projected onto photosensitive
paper.Lenses adjust the size of the type. </dd>
<dt>Digital type</dt>
<dd><p>Digital typefaces store the outline of the font shape in a format
such as Postscript. The outline may be scaled to any size for output.</p>
<p>Postcripts emerged as a standard due to its support of
graphics and its early support on the Macintosh computer and Apple laser
printer.</p> </dd>
</dl>
DESCRIPTION LIST
Linotype
Line-casting allowed type to be selected,used,then recirculated into
the machine automatically.This advance increased the speed of
typesetting and printing dramatically.
Photocomposition
Typefaces are stored on film then projected onto photosensitive
paper. Lenses adjust the size of the type.
Digital Type
Digital typefaces store the outline of the font shapein a format such
as Postscript. The outline may be scaled to any size for output.
Postscript emerged as a standard due to its support of graphics and
its early support on the Macintosh computer and Apple laser printer.
4. LONG QUOTATION
Used to indicate a block of
quoted text.
It is commonly used to present
quotations, excerpts, or
citations.
It is recommended that content
within blockquote elements be
contained in other elements,
such as paragraphs,headings,
or list.
LONG QUOTATION
<p>Renowned type designer, Matthew Carter, has this to say
about his profession:</p>
<blockquote>
<p>Our alphabet hasn’t changed in eons; there isn’t
much latitude in what designer can do with the individual
letters.</p>
<p>Much like a piece of classical music, the score is
written down - it’s not something that is tampered with - and
yet, each conductor interprets that score differently. There is
tension in the interpretation.</p>
</blockqoute>
LONG QUOTATION
Renowned type designer, Mathhew Carter, has this to say
about his profession:
Our alphabet hasn’t changes in eons; there isn’t much
latitude in what a designer can do with the individual
letters.
Much like a piece of classical music, the score is written
down. It’s not something that is tampered with, and yet,
each conductor interprets that score differently. There is
tension in the interpretation.
5. PREFORMATTED TEXT
Used to define preformatted text.
It preserves spaces, line breaks,
and indentation within its content.
It is often used for displaying
codes snippets or text that
requires precise formatting.

<pre> ......</pre>
Preformatted text
6. FIGURES
Used to encapsulate media
content,such as images or videos,
along with their captions.
It allows for a semantic grouping
of media and associated
descriptive content
<figure> ......</figure>
Contact information
NEW IN HTML5

<figcaption> ......</figcaption>
Contact information
NEW IN HTML5
THANK YOU
THYNK UNLIMITED
WE LEARN FOR THE FUTURE

FOR
LISTENING!

You might also like