EB Rogramming: ITE Tructure

WEB PROGRAMMING
SITE STRUCTURE-P1
Alaa Khalaf Hamoud

2021-07-03
Contents
4.1 Introduction
4.2 Using HTML5
4.2.1 Semantic Markup
4.2.2 Document Structure
4.2.3 Content Structure
4.2.4 CSS Rules
4.3 Organizing Content and Functionality
4.3.1 Browser variations
4.3.1 File Names
4.4 Search Engine Optimization (SEO)
4.5 Understanding Search
4.1 Introduction
4.1 Introduction
• Site structure determines how well sites
work in the broader context of the web,
and on all the various mobile and
desktop screens.
• The methods you use to mark up pages
determine whether they can be read
well by software and indexed well by
search engines.
4.1 Introduction
• The logic and stability of the underlying files
and directories on which your web site rests
affect its functionality, as well as its potential
for growth and expansion.
4.1 Introduction
• The content management system (CMS) you
choose will affect your web design choices
for years, but will also bring power and
flexibility that you could never practically
achieve with static HTML methods.
4.2 Using HTML5
• Using HTML5 is the key to getting maximum
flexibility and return on your investment in
web content.
• HTML5 was designed to distinguish clearly
between a document’s hierarchical outline
structure (Headline 1, Headline 2,
paragraph, list, and so on) and the visual
presentation of the document (boldface,
italics, font, type size, color, and so on).
• HTML markup is considered semantic when
standard HTML tags are used to convey
meaning and content structure, not simply
to make text look a certain way in a
browser.
• This semantic approach to web
markup is a central concept
underlying efficient web coding,
information architecture, universal
usability, search engine visibility,
and maximum display flexibility.
Chapter One Chapter One
1.1 Web design
Web design
Web design is the process
Web design is the of preparing content for
process of preparing delivery on web.
content for delivery
on web.
• HTML contents are:
– HTML document structure (<head>,
<body>, <div>, ).
– Text content
– Semantic markup to convey meaning and
content structure (headlines, paragraph
text, lists, quotations).
• HTML contents are:
– Visual presentation using CSS to make
content look a certain way
– Links to audiovisual content (.gif, .jpeg, or
.png graphics, media files).
– Interactive behavior (JavaScript, PHP, or
other programming technique).
• HTML main elements are head and body.
• Head can hold:
– Code standards and document type to the
display device.
– Page title.
– Links to external style sheets and JavaScript code.
– Meta (keywords, charset, author).
• HTML Main Elements are head and body.
• Body can hold:
– All page content.
– Div, span, header, footer, …
– Table, Lists, definitions…
• When to use h1, h2? Do we use them based
on the result appearance?
• If you want to style text use CSS instead.
• , or , 
• Elements such as classes, ids, divisions,
spans, and meta tags can make it easier for
team members to understand, use, visually
style, and programmatically control page
elements.
• Does page have image or graphic in its
body?
• LINKS are used instead (ALT should be
used).
• ALT and LONGDESC are important for
universal usability search engine
visibility.
• Following semantic web markup
practices and using carefully
validated page code and style
sheets is your best strategy for
ensuring that your web content will
be broadly useful and visible into
the future.
4.2.4 CSS Rules
• CSS rules can control the visual design of the
page.
• The advantage of using more than one style
sheet over the same page.
4.2.4 CSS Rules
• CSS style for blind listener.
4.2.4 CSS Rules
• CSS is an extendable system, in which a
related set of CSS instructions spread
across multiple CSS files can cascade
from very general style and layout
instructions shared by all of your pages
to extremely specific styles that only a
handful of pages in your site may share.
4.3 Organizing Content and Functionality
• Well-designed sites contain modular

elements that are used repeatedly
across many dozens or hundreds of
pages.
• How to handle PDF files? How to search
its content?
• Adobe flash animations that contains
header and images in its body.
4.3.1 Browser variations
• Browsers (in different OSs and platforms)
do not show the page with the same
appearance.
• Never trust the implementation of HTML5,
CSS, JavaScript, or any browser plug-in
architecture such as Adobe Flash.
• Check your web logs or use a service such
as Google Analytics.
4.3.1 Browser Variations
• Using valid HTML and CSS code by using
a code validation service such as those
from the W3C:
• For HTML:
http://www.validator.w3.org
• For CSS:
http://www.jigsaw.w3.org/css-validato
r
4.3.2 File Names
• EightDotThree MS-DOS Names.
• Use “friendly” URL naming conventions that
have two advantages:
– They are easier for people to make sense
of
– They contribute to the relevance rankings
in search engines like Bing and Google
• Why SEO?
• How SEO works?
• Your site uses proper HTML structural
markup and all of your pages are linked
together well, you’ve already done at
least 80 percent of the work to make
your site as visible as possible to search
engines.
• SEO ensure that your website is well

formed and all the important
information are not hidden.
• SEO do not bring your site in the top of
google search.
• SEO can increase traffic volume to your
site and makes thing easier to find.
• Links and individual web pages are
basic elements for search.
• Search engines find web pages by
following web links from one page to
another.
• Analyze and index web page content
for topical relevance (web crawlers).
• Home page is usually the first page
listed on a search engine result page
(SERP).
• Each page of your site needs to be
optimized for search and well linked to
other pages.
• You should treat each page as a home
page.
• Search engine crawlers can only analyze
the text, the web links, and some of the
HTML markup code of your web page
and then make inferences about the
nature, quality, and topical relevance of
your pages based on statistical analysis
of the words on each page.
Questions
• What does site structure determine?
• How can using CMS affect site visibility?
• HTML5 makes web content more visible, give an
example?
• Define with example, semantic markup?
• How can Links and Alternative text affect the site
visibility?
• Why should we validate our HTML/CSS codes?
• How to handle repeated modular across pages?
Questions
• How PDF files affect site visibility?
• Why there is a need for URL validator
(HTML+CSS)?
• What is SEO? Why it is important?
• What is long-tail distribution?
• What are the basic elements for search engine?
• Explain the work of web crawler?
• Define SERP?
End of Chapter Four-P1

EB Rogramming: ITE Tructure

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

EB Rogramming: ITE Tructure

Uploaded by

Copyright:

Available Formats

WEB PROGRAMMING

Alaa Khalaf Hamoud

• Well-designed sites contain modular

• SEO ensure that your website is well

You might also like