Layouting using HTML

The layout is one of the important parts of a web page. The different parts of a layout make a web page
decent and organized. HTML has several elements and techniques in order to make a web page layout
possible.
<section>
Defines a section in a document
<header>
Defines a header for a document or a section.
<nav>
Defines a set of navigation links.
<footer>
Defines content aside from the content (like a sidebar).
<article>
Defines an independent, self-contained content.
<aside>
Defines a footer for a document or a section.

HTML Layout Techniques

CSS Float Layout

CSS Flexbox Layout
Float is a CSS positioning property. In web design, page elements with the CSS float property applied to
them are just like the images in the print layout where the text flows around them.
The main idea behind the flex layout is to give the container the ability to alter its items’ width/height to best
fill the available space. A flex container expands items to fill available free space or shrinks them to prevent
overflow.

Basic Web Design Principles and Elements

7 PRINCIPLES OF DESIGN
BALANCE
Refers to the visual weight of the elements of the composition. The weight can come from color, size, or
texture.
CONTRAST
Contrast creates space and difference between elements in your design.
The difference between elements of art in a composition is such that each element is made stronger in
relation to the other.
EMPHASIS
An area of the composition that is visually dominant and commands the viewer's attention.
MOVEMENT
The result of using the elements of art such that they move the viewer's eye around and within the image.

PATTERN
The uniform repetition of any of the elements of art or any combination thereof
RHYTHM
It is created by movement implied through the repetition of elements of art in a non-uniform but organized
way.
VARIETY
The use of several elements that fit together comfortably.
It could be the use of lines, shapes, and colours.

CONCRETE ELEMENTS IN MAKING A SITE:

1. Consider the audience and goals. It should have a clear sense of who will be using the site and what kind of
experiences you are hoping to provide.

2. It is advisable to plan the site on paper first. Draw a "family tree" of pages with arrows that indicate the
links or a hierarchical outline.

STRIVE FOR CONSISTENCY

The pages in it should have a common feel consistency among colour schemes, backgrounds, tone of voice
and navigational tools.
PROVIDE A RICH SET OF LINKS WITHIN THE SITE
There should be multiple ways for future users to navigate the pages.
DON'T HIDE IMPORTANT INFORMATION
Users don't like to click many times just to find the certain information they want, try to make it accessible
upfront if the information is particularly important

THE WEB MEDIUM

TLE 8

PROVIDE OPPORTUNITIES FOR INTERACTION

AVOID TEXT-ONLY PAGES

DON'T SACRIFICE ELEGANCE

THE FRONT DOOR

GIVE A DESCRIPTIVE TITLE OF THE SITE

INCLUDE A BRIEF INTRODUCTION

MAKE THE SITE'S HOME PAGE AS USEFUL A STARTING POINT AS POSSIBLE.

Accessibility

MAKE SURE THE TEXT USED IS LEGIBLE

MAKE SURE THE SITE IS PLATFORM-INDEPENDENT

CONSIDER THE NEEDS OF THE VIEWERS

THE END GAME

THOROUGHLY TEST THE SITE

Ask a friend to sit down and explore it. Ask them to think out loud, and watch them navigate the site.
CAREFULLY PROOFREAD
Maintain a high level of professionalism.
Check carefully for spelling and grammatical errors before posting written materials to the web.

HTML MEDIA
MULTIMEDIA CONTENT IS THE KIND OF CONTENT WHICH USES A COMBINATION OF
DIFFERENT TYPES OF CONTENT FORMS, INCLUDING; TEXT, IMAGE, AUDIO, VIDEO, AND
ANIMATION.
Multimedia can be recorded and played, displayed, interacted with, or accessed by information content
processing devices, such as computerized and electronic devices.

EMBEDDED VIDEO FOOTAGE

Multimedia of this variety is useful to site visitors who have literacy challenges and those with visual, audio
or cognitive disabilities. Provide links to a narration transcript to reach the broadest audience should
accessibility issues occur.
INFORMATIVE IMAGES
The advantage of using photos in a multimedia Web design goes beyond the use of images as decoration.
Images in a multimedia context consist of slide shows or galleries that a website visitor can view.
ANIMATED INFORMATION
Flash objects are multimedia elements that you can use in your Web design as well. This content can
illustrate how things work or present information in entertaining ways.

SOUND
The sound clips you incorporate can be short or long. You may use them to deliver website visitors
information in the form of recorded speech.
MULTIMEDIA FORMATS
Multimedia elements (like audio or video) are stored in media files.
The most common way to discover the type of a file, is to look at the file extension.
Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
COMMON VIDEO FORMATS

Format File Description

MIDI .mid MIDI (Musical Instrument Digital Interface). Main format for all
electronic music devices like synthesizers and PC sound cards. MIDI files do
.midi
not contain sound, but digital notes that can be played by electronics. Plays
well on all computers and music hardware, but not in web browsers.

RealAudio .rm RealAudio. Developed by Real Media to allow streaming of audio with low
bandwidths. Does not play in web browsers.
.ram
WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Plays well on
Windows computers, but not in web browsers.

AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default format
for iTunes. Plays well on Apple computers, but not in web browsers.

WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows,
Macintosh, and Linux operating systems. Supported by HTML.

Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.

MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most
popular format for music players. Combines good compression (small files)
with high quality. Supported by all browsers.

MP4 .mp4 MP4 is a video format, but can also be used for audio. Supported by all
browsers.

Format File Description

MIDI .mid MIDI (Musical Instrument Digital Interface). Main format for all
electronic music devices like synthesizers and PC sound cards. MIDI files do
.midi
not contain sound, but digital notes that can be played by electronics. Plays
well on all computers and music hardware, but not in web browsers.

RealAudio .rm RealAudio. Developed by Real Media to allow streaming of audio with low
bandwidths. Does not play in web browsers.
.ram

WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Plays well on
Windows computers, but not in web browsers.

AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default format
for iTunes. Plays well on Apple computers, but not in web browsers.

WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows,
Macintosh, and Linux operating systems. Supported by HTML.

Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.

MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most
popular format for music players. Combines good compression (small files)
with high quality. Supported by all browsers.
MP4 .mp4 MP4 is a video format, but can also be used for audio. Supported by all
browsers.

The controls attribute adds video controls, like play, pause, and volume.

The <source> element allows you to specify alternative video files which the browser may choose

from.

The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element.