Scribd
Upload
21 views

HTML and CSS Fundamentals

Web design involves using tools like HTML, CSS, and JavaScript to create and style webpages. Key elements of web design include using markup languages like HTML to structure content, CSS to style and position elements, and tools that allow for dynamic content, animation, and interactivity. Effective web design separates content from presentation, allows changing a site's appearance without altering structure, and controls elements like typography and layout. Proper web design makes sites easier to navigate, understand, and use while avoiding problems.

Uploaded by

queeny shino
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views

HTML and CSS Fundamentals

Web design involves using tools like HTML, CSS, and JavaScript to create and style webpages. Key elements of web design include using markup languages like HTML to structure content, CSS to style and position elements, and tools that allow for dynamic content, animation, and interactivity. Effective web design separates content from presentation, allows changing a site's appearance without altering structure, and controls elements like typography and layout. Proper web design makes sites easier to navigate, understand, and use while avoiding problems.

Uploaded by

queeny shino
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 36

WEB DESIGN

HTML and CSS


Fundamentals
KARL JUNEL CAGUBCOB

Mountain View College


School of Computing
HTML and CSS Fundamentals

Web Design Tools

Various tools exist to help you to create webpages and add dynamic
content, animation, and interactivity. Successfully using these tools
requires varying levels of skill and knowledge. Webpage creation tools
include markup languages, Cascading Style Sheets (CSS), scripting
languages, text editors, HTML editors, web development tools, web
templates, and content management systems (CMS).
Markup Languages

A markup language is a coding system that uses tags to provide


instructions about the appearance, structure, and formatting of a
document. The markup languages used to
create webpages are HTML, XML, and XHTML
Hypertext Markup Language (HTML)

- is a markup language used to create webpages. The HTML markup


language uses predefined codes called HTML tags to define the format
and organization of webpage elements. HTML tags must be in lowercase,
surrounded by brackets, and inserted in pairs to define the beginning
and the end of the target of the tag.
TAGS
NESTED TAGS
BASIC STRUCTURE
HEAD
PREVIEW
BODY
PREVIEW
Cascading Style Sheet (CSS)

A Cascading Style Sheet (CSS) is a document that uses rules to


standardize the appearance of webpage content by defining styles for
elements such as font, margins,
positioning, background colors, and more. Web designers store CSS
specifications for a website in a separate document, called a style sheet.
CSS USES
CSS separates the formatting and appearance instructions from the
structure and content found in HTML documents. Using CSS to
determine the presentation of the content
allows a web designer to change a document’s appearance without
impacting the document’s structure. CSS enables web designers to
control typography and page layout by allowing the specification of the
following:

• Font formatting, including for headings


• Leading (space between lines)
• Tracking (space between words)
• Kerning (space between letters)
• Margins, indents, and element positioning
• Font color and background color
Styles and Style Sheets
You apply CSS style rules to a webpage in one of three ways:

• As part of an external style sheet saved in the folder with the


website’s pages. The webpages are linked to the style sheet with an
HTML tag.

• As part of an internal style sheet inserted using the <style> element


within a page’s HTML heading tags.

• As an inline style inserted using the style attribute within the


individual HTML tags on a page.
External style sheet
An external style sheet, sometimes called a linked style sheet, is a separate
text document that contains style rules. You can apply the style rules in an
external style sheet to one or more webpages by linking the pages to the
external style sheet. External style sheets are a powerful tool for changing
the formatting or layout of multiple pages at a site
at one time simply by editing the style sheet.
Internal style sheets
Internal style sheets, or embedded style sheets, appear within a page’s HTML
<head> … </head> tags along with other heading information, such as a page’s
title. Unlike an external style sheet that can affect several webpages, style rules
in an internal style sheet only modify elements on the webpage that includes the
rules. Using internal style sheets increases the load time for webpages as the file
size of the page is larger.
Inline styles
Inline styles involve inserting the style rule within an element’s HTML tag.
You should use this method sparingly because inline styles have a number of
disadvantages, including failure to separate content from design (which is the
primary goal of CSS), increased webpage maintenance issues, and
accessibility issues.
WEBSITE LAYERS

BEHAVIOR (JS)

PRESENTATION (CSS)

CONTENT (HTML)
Why take the time to design and test before
launching?

Although it takes a lot more time up front, a well-thought-out web site:


• Has fewer problems
• Is more effective
• Is more understandable
• Is easier to navigate
and may end up taking less time overall to create and maintain.
Pre-design Work

• Consider your organization’s mission


• Define the target audience
• Set goals for the web site
 Immediate
 Long-term
• Gather content
Organize and establish hierarchy of content
“Chunk” content into logical information units
More Pre-design Work

• Create an outline or plan for content


• Create your web site on paper first
Use a flowchart to depict how visitors will go from one page to another
• Think about the actual HTML, PDF, graphic, sound, and other files
you will need in the site
Where will they be placed?
How will visitors access them?
• Organize the files logically, so that the development team can
understand the hierarchy of the web pages.
Compare:
Compare:
Types of Web Sites
Personal Websites

Individuals create their own personal websites for a range of


communication purposes. You might use a personal website to promote
your employment credentials, share
news and photos with friends and family, or share a common interest or
hobby with fellow
enthusiasts.

Creating a personal website generally is less complex than creating other


types of
websites, and designers typically have fewer resources available than
when creating a
commercial website
Organizational and Topical Websites

Individuals create their own personal websites for a range of


communication purposes. You might use a personal website to promote
your employment credentials, share
news and photos with friends and family, or share a common interest or
hobby with fellow
enthusiasts.

Creating a personal website generally is less complex than creating other


types of
websites, and designers typically have fewer resources available than
when creating a
commercial website
Commercial Websites

The goal of many commercial websites is to promote and sell the


products or services of a business, from the smallest home-based business
to the largest international
enterprise.
In addition to websites that promote and sell products or services, commercial websites also
include websites that generate their revenue largely from online services such as advertising
—search tool websites and portal websites.
Search Tools
Search tools are websites that locate specific information on the web
based on a user’s search requirements. Such tools include search engines,
metasearch engines, and search directories.

Search engine - is a web-based search tool that locates a webpage using a


word or phrase found in the page. To find webpages on particular topics
using a popular search engine, such as Google, Bing, or ask.com, you
enter terms or phrases, called keywords, in the search engine’s text box
and click a button usually labeled Search or Go.
1. Why is web design important for making websites
look good and work well?
2. In what ways does effective web design
contribute to the success and impact of online content
and interactions?

You might also like