3. Basic Sections of a Webpage
• A webpage normally contains following sections —
Head Content
• It holds all the important information about your web page.
• It means the header part of the web page.
• One can include optional information about the webpage
such as title, optional search keyword and an optional style
sheet.
• It is usually a big strip across the top with a big heading
and/or logo.
• Usually this information remains at the same place when you
move from one webpage to another.
4. Adding a Title
• <title> element is used to add a title to the document.
• It appears on the top most bar of the browser.
• It only contains text.
5. Paragraph breaks and Line Breaks
• Paragraphs in the webpage are separated by small amount of
space between them, usually the height of a line of text.
• Visually, it looks as through there is a blank line separating the
two paragraphs.
• When you press enter in the WYSIWYG editor it ends the
current paragraph that you are typing and moves the cursor
down to a new paragraph.
• When this happens an opening paragraph tag is created (<P>)
and below the closing paragraph tag (</p>) for the paragraph
you are currently editing.
6. Paragraph breaks and Line Breaks
• Line break is different from paragraph break.
• A line break ends the line you are currently on and resumes
on the next line.
• So when a line break is inserted the cursor moves down a
single line, which is different from the paragraph break which
ends the paragraph and starts a new one.
• When we hold shift and press Enter, a line break tag is
inserted (<br/>) and the text entered after the line break will
appear on the next line down.
7. Body Content
• This is the big area in the center of a webpage that contains
most of the unique content of a webpage.
• This is the area that changes from page to page.
• It represent visible content of the web page.
• Body content include text or visual content that is published
on a website.
• By word content here, we mean text, applications, images,
archived e-mail messages, data, e-services, audio and video
files and so on.
8. Body Content
• Body content include all the elements in a webpage.
• Here only we specify link within or outside web pages, text
color, background, insert images, tables, video, audio and
many more things.
• One should include high quality body content in his website.
• It is crucial to the success of any website in order to retain
visitors and have a high ranking on search engines.
• It is only the content of the website that keeps visitor coming
back to your site.
9. Body Content
• Body content is the main text blocks on your web page.
• It is the most important part as if the body content is not
unique and not providing quality it will never rank.
• You need to have a basic level of content on the page to rank
in search, a page with all images and no text will have a tough
time ranking for any term.
10. Horizontal lines
• Horizontal rule represents a sectional break.
• The transition from one scene of a story into the next or
between the end of a letter and a postscript are good
examples of when a horizontal rule may be appropriate.
• Horizontal line can also be consider as more space between
section, a decorative accent character.
• Horizontal line is used to draw a horizontal line in a web page.
• It is used to divide a HTML page into the different horizontal
sections.
• Horizontal lines are required when we need to display
different types of content in the same HTML page in a distinct
manner.
11. Font
• Font is a particular shape and style of a set of letters that are
used on a computer screen.
• It is a collection of characters with a similar design.
• These characters include lower case and upper case letters,
numbers punctuation marks and symbols.
• Changing the font can alter the look and feel of a block of text.
• Some fonts are designed to add a unique style to the text.
• Fonts play a, very important role in making a website more
user friendly and increasing content readability.
• Font, face and color depends entirely on the computer and
browser that is being used to view your page.
12. Font
o Text size
• You can specify text size in your webpage.
• You can even specify different-different sizes for different
paragraphs.
o Text Color
• As you can change text size you can change text color also.
• The most common way of coloring HTML text is by using
hexadecimal color codes.
• Another way is to just use the color name.
13. Font
• By default, browser uses some default settings say the default
face is usually times and the default size is 3, and the default
color is black.
• With the Font tag, you can override these defaults and display
text in special ways.
• You should only use font faces that everybody has on their
computers.
• For example, Arial, Courier and Times are safe choice to use.
• They are readable which makes them popular.
• You can even make each letter in a word a distinct color.
14. Headings
• Headings help users and search engines to read and
understand text.
• They act as a guide for the readers and make it easier for
people to understand what a post or page is about.
• Heading also define which parts of your content are important
and show how they are interconnected.
• Headings are text that guide readers through an article that
what is the main motive of the article.
• As people read them carefully they should indicate what a
section or paragraph is about.
15. Headings
• If we will not mention headings then people will not know
what this particular article is about.
• Headings are also helpful to get back to track if they get lost.
• Heading structure is important for accessibility as well
especially for people who can't easily read from a screen.
• Headings give you great chance to use your focus keyword
prominently to make it really clear what the page is about.
• But do it in such a way that it shouldn't feel unnatural or
weird.
• Hence you should use headings to add structure and signposts
to your content and to describe what each section is about.
16. Text Alignment
• Text alignment refers to how lines of text on the page line up.
• Proper alignment of elements and text on your website
greatly impact the overall design.
• Alignment is a term used to describe how text is placed on the
screen in relation to the margins.
• There are four basic way to align text on the web.
1. Left —
• Default setting when text alignment or the direction of text is
not set on a webpage.
• Default setting for languages read top to bottom and left to
right.
• Each line of text, is even with the left margin.
17. Text Alignment
2. Right —
• Each line of text is aligned with the right margin.
• It is a default setting if the direction of the language used on the
webpage is right to left.
3. Center —
• As the name implies the text is centered on the web page.
4. Justified. —
• Both the left and right edges of text in a line are even against the
left and right margins.
• The words are spaced out to fill the line of text.
• It is most commonly used in newspapers and other printed media.
18. Text Alignment
• Here are some guidelines for aligning text —
• Avoid using right aligned text for paragraphs.
• Right aligned text is appropriate for numbers within columns.
• Use centered text very often and also not for paragraphs of
text.
• Most of the headings should be left aligned but there are
cases where centered headings and shout sentences can look
good.
• If you are going to use justified text, make sure the lines of
text are not too wide.
19. List
• Lists are used all the time on the web.
• Articles, Website navigation menus and product feature on e-
commerce websites all make frequent use of lists.
• List is used to present the information.
• Some lists use icons, while some use other means of
communicating and separating list items.
• Some are vertical while some are horizontal.
• Some consists of boxes while some are floating in free space.
20. List
• There are three types of lists —
Ordered List —
• These are sometimes called numbered lists because, by
default, the list items contained in that list have a specific
numerical order or ranking.
• Ordered lists are appropriate where the exact ordering of
items are critically important to the meaning of the content.
21. List
• An example would be cooking instructions :
1. Collect Ingredients.
2. Crush Ginger and Boil Water.
3. Adding Sugar and Tea.
4. Add Milk.
5. Pour in the cup & Enjoy.
22. List
• Ordered lists can be displayed with several sequencing options.
• The default in most browsers in decimal numbers, but there are other
options available.
Letters — Lowercase ascii letters (a, b, c ....)
— Uppercase ascii letters (A, B, C ….)
Numbers — Decimal numbers (1, 2, 3….)
— Decimal numbers with leading zeros (01, 02, 03....)
Lowercase & Uppercase Roman numerals (i, ii, iii …..) & (I, II, III ….)
23. List
Unordered list —
• These are sometimes called bulleted lists because the default visual
appearance of an unordered list is to have small bullet icons in front of the
list items.
• This type of list is used for those list that don't have a required order.
• Unordered list is also known as bulleted list.
• It is used when a set of items can be placed in any order.
• An example is a shopping list :-
• milk
• bread
• Butter
• coffee beans
24. List
Definition List —
• These are lists of items that have two parts, a term to be defined
and the definition.
• They are commonly used to display a definition/description pair like
you would find in a dictionary, but definition lists can also be used
for many other kinds of content.
• They are also known as description lists.
• Description lists are flexible.
• You can associate more than one value with a single name, or vice
versa.
• It creates a list with two parts to each entry: the name or term to
be defined and the definition.
• This creates lists similar to a dictionary or glossary.
• It looks like —
26. List
• As you can see, there is a single term, but you can write
multiple definitions of this single term here.
• Using HTML lists is a great way to present information to
readers on your web pages.
• Lists make information on your web page easy to parse.
• We should use lists for the following reasons :
• Lists are interesting to look at.
• Lists are easy to scan.
• Lists make the writer get to the point.
27. Background Color
• Background color defines the color of the element's
background.
• By default, the background color is transparent, basically
meaning that there is no background color.
• Coloring a webpage is actually pretty simple.
• You can specify colors in hex code or RGB format.
