Main
Planning a Website
Lesson #1 Wireframes
- simple sketch of the key info that
needs to go on each page of a site
● Steps in Designing and
Constructing a Web Page - involves sketching or shading areas
- Identify your Target Audience where each element of the page will
- Target a certain audience to go
influence the design and development
of your web site - ensures that all of the info that needs
to be on a page is included
- Set goals for your site
- Ask “Why am I building a Website?”,
avoid unnecessary content
- Create your web site’s structure
- Consists of a homepage, categories,
subcategories, and individual page
structured like a pyramid with the
homepage at the top
- Organize your web site’s content
- Rank site content according to the Structure of HTML
level of importance to your site visitors Lesson #3
- Develop your web site’s navigation
- Include a standard navigation bar on ● Hypertext Markup Language
all pages for consistency and ease of (HTML)
use - the most widely used code language
to create and write webpages and
- Develop the Web-media elements their content
- Pictures, Texts, Hyperlink, Form,
- standard markup language for
Sound, Animations, Video Clips
documents designed to be displayed
in a web browser
- called the “Language of the
Sitemaps and Wireframes
Lesson #2
Internet”
- a markup language, thus, you simply
“mark-up” a document with tags
● Site Maps (e.g., <title> Hello World! <title>) that
- blueprint of your website tell a web browser how to structure it
- create a diagram of the pages which to display
will be used to structure the site - developed with the intent of defining
the structure of documents like
paragraphs and lists to facilitate the
sharing of scientific information
between scientists and researchers
● Hypertext
- refers to the way web pages (HTML
documents) are linked together;
these are the links available on a
webpage 2. <head> </head>
- represents the document header
● Tags - keeps other tags like <title>, <link>,
- HTML entities that are commands etc.
used to tell the browser how to display - not displayed in the web browser
content on a page when loaded
- opening tags: <b> ● <title> </title>
- closing tags: </b> - gives the web page / document a title
- example: <b> Hello World! </b> which can be found in the browser title
bar
- Elements includes the tags and
content, whereas tags are the 3. <body> </body>
commands only - represents the document body
- keeps other tags like <h1>, <div>,
● Attributes <p> etc.
- additional aspects put inside tags to
- contains all the content of the
customize content
document, such as paragraphs,
- an example is shown below: red images, hyperlinks, tables, lists, etc.
means tag, green means attribute
type, and yellow means attribute value ● <h1> </h1>
(changeable) - represents the heading, ranges until
<h6> which is the smallest
● The Basic HTML Document
Structure:
● <p> </p>
- represents a paragraph in a document
- alignment can be defined using <p
align=” ”>
- possible values: left, center, right
● <hr>
● The <!DOCTYPE> Declaration - stands for horizontal rule; inserts a
- used by the web browser to horizontal line or thematic break to
understand the version of the HTML divide or separate document sections
used in the document.
- it is an empty tag, meaning it does not
- the current version is 5, and it uses the need a closing tag
declaration <!DOCTYPE html>
- can have attributes like color, size,
width, align, and noshade
● HTML Tags
1. <html> </html>
- encloses the entire HTML document;
comprises mainly of the tags below:
● <font> - the tag used to insert images into
- also used to show text, but can apply your website
different font styles - it is an empty tag, meaning it does not
- the biggest font size is 16 need a closing tag
● <src>
- meaning “source”, found inside the
<img> tag
- simply tells the browser where the
image file is, which is usually a
● Naming Conventions of HTML
relative URL pointing to an image on
Documents
your own site
- document files use the extension
.html or .htm - syntax example:
- older systems such as Windows 3.1
and DOS could not understand
four-letter file extensions, so anyone
creating web pages on those systems ● <alt>
used .htm as the extension. - an attribute for the <img> tag
- web servers are case-sensitive - provides a text description of the
- only use uppercase or lowercase image, which describes the image if
you cannot see it
- it is best to use simple filenames with
only letters and numbers
● <title>
- exclude spaces, punctuation, and - an attribute for the <img> tag
special characters
- provides additional text description of
the image, or tooltips
HTML Images ● <width> and <height>
Lesson #4
- an attribute for the <img> tag
- specifies the image’s width and
● Images can be used to represent height in pixels
logos, photographs, charts, and
diagrams on your website. It sets the ● <align>
tone for the website. - an attribute for the <img> tag
- possible values: left (default) or right
● In selecting images, consider their - the top, bottom, and middle values are
format, size, attractiveness, and in CSS
professionalism.
HTML Lists
● Make sure images are relevant, Lesson #5
convey information and the right
mood, are recognizable, and fit the
color palette. ● HTML Lists
- useful in web pages to draw attention
● When websites are too big, keeping to short pieces of information
images in a separate / directory
- presents information in an organized
folder helps you understand how a
and structured format
site is organized.
- the tag to list items in lists is: <li> </li>
● <img>
● Types of HTML Lists
<a> </a>
1. Ordered Lists <ol></ol> - tag used to create links
- each item is preceded by a number or - to link to another site, the href
letter; there is an order (hyperlink reference) attribute is used
2. Unordered Lists <ul></ul>
- does not use numbers and letters Absolute URL
- does not rely on order - linking to a different website; value of
- uses bullet points: can be disc, circle, the href attribute will be the full web
or square address of the other website
Relative URL
- linking to other pages within the same
site; it is unnecessary to specify the
domain name in the URL
- When linking to a specific part in
the same page, the id attribute is
3. Definition Lists <dl></dl> used. (will be explained at CSS)
- uses a definition list to show and
describe terms and definitions
● <dt> </dt> Directory Structure
- stands for the definition term; used to Lesson #7
define the term that will be described
● <dd> </dd>
- stands for the definition description;
● Directory Structure
used to display the description of - organization of files into a hierarchy of
<dt></dt> folders; should be stable and
scalable
- should NOT be fundamentally
changed; only be added to
[FIGURE 1]
Hyperlinks
Lesson #6
● Hyperlink
- allows visitors to navigate between
websites by clicking on words,
phrases, and images
Relative Link Type (refer to FIGURE 1)
- to identify the relative link type,
identify the value of the href
attribute - to help visualize coding CSS, imagine
an invisible box around each HTML
● Same Folder element
- from cinema index to cinema
reviews, ● Block elements
<a href=”[Link]”> Cinema - starts on a new line (ex: <br>, <p>,
Reviews </a> <h1>, <h2>..<h6>, ect.)
Child Folder ● Inline elements
- from main homepage to music - flows within the text; opposite of block
homepage, (ex: <b>, <i>, <u>, <span>, ect.)
<a href=”mussic/[Link]”>
Music Homepage </a> PARTS OF CSS SYNTAX
Grandchild Folder
- from main homepage to cinema
homepage,
<a
href=”movies/cinema/[Link]”>
Cinema Homepage </a> Selector - targeted html element to be styled
Property - respective attributes of the
Parent Folder selected html tag
- from music homepage to main
Value - values assigned to properties
homepage, use [ ../ ] to indicate the
folder above:
- Declarations contain pairs of properties
<a href=”../[Link]”> Home </a>
and values
Grandparent Folder
- from dvd homepage to main
homepage, use [ ../ ] twice to go up
CSS Inclusion
Lesson #9
two folders:
<a href=”../../[Link]”> Home
</a>
● Inclusion
- way of associating your styles with the
HTML document
Introduction to CSS
Lesson #8
Types of CSS Inclusion
● Cascading Style Sheet / CSS
- used to stylize the website
- handles the “look and feel” of a
webpage
- saves time and page load faster due
to more compact code
- created and maintained through
people within the W3C (World Wide
Web Consortium), making
recommendations on how the internet
should evolve
Types of CSS Selectors
CSS Selectors
Lesson #10
● <div> </div>
- sections/divides areas in an HTML
document
- used as a container for HTML
elements, which is then manipulated
by CSS or Javascript
Cascading of CSS Rules
● Last Rule
- if 2 selectors are identical, the latter of
the 2 will take precedence
● Specificity
- more specific rules will take
precedence over more general rules
Typeface Terminology
Lesson #11 Some CSS Properties applied on fonts
● Serif
- extra details on the ends of the main
strokes of the letters
- used for long passages of printed text
since it is much easier to read Text Formatting
- ex. Times New Roman, Garamond Lesson #12
● Sans-Serif
- straight ends to letters, has a much ● Text Formatting
cleaner design - used to style & control the appearance
- used digitally if text is small since it will of text on a website
be easier to read
- ex. Arial, Verdana ● text-color
- sets the color of text using:
● Monospace
- every letter has the same width
- usually used for code since the text is
easier to follow
- ex. Courier New, Roboto Mono
● Cursive TOP TO BOTTOM:
- has a handwritten style, joining - color names
strokes - Hexadecimal
- ex. Comic Sans MS, Dancing Script - red, green, blue, alpha
- hue, saturation, lightness, alpha
(Dancing Script)
(alpha is for transparency of text)
● Fantasy / Display ● text-shadow
- decorative fonts, usually used for - for depth and emphasis
titles
- ex. Impact, Lilita One
Typography Parts
Ascender - above cap height
Cap Height - top of flat letters
X-height - height of lowercase letters VALUES FROM LEFT TO RIGHT:
- horizontal-shadow
Baseline - where the letters sit
- vertical-shadow
Descender - below the baseline
- blur-radius
- shadow color (optional)
(horizontal and vertical shadow values can
be positive or negative, blur-radius is
limited to positive or zero)
END OF REVIEWER; GOOD LUCK