Scribd
Upload
29 views27 pages

Yahxee 1st Class

The document provides an introduction to web design, focusing on HTML, CSS, and JavaScript as essential components for creating websites. It outlines the objectives of a course on HTML, including using text editors, creating hyperlinks, and understanding HTML structure and tags. Additionally, it emphasizes the importance of design in web development and offers practical steps for creating a simple web page using Notepad.

Uploaded by

samson jinadu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
29 views27 pages

Yahxee 1st Class

The document provides an introduction to web design, focusing on HTML, CSS, and JavaScript as essential components for creating websites. It outlines the objectives of a course on HTML, including using text editors, creating hyperlinks, and understanding HTML structure and tags. Additionally, it emphasizes the importance of design in web development and offers practical steps for creating a simple web page using Notepad.

Uploaded by

samson jinadu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

Website Design

HTML, CSS and


JavaScript
By Yahuza
Yakubu
INTRODUCTION
Web design is the visual aesthetics and page layout of a website.
It goes hand-in-hand with web development in the creation of a
static website or dynamic web application.
Regardless of whether you wants to make static or dynamic web
application, design is the first people notice when they arrive on
a website, and if its not good enough, they’ll leave.
Learn coding and you’ll be a valuable asset to many. But learn coding and design and
you’ll be second to none.
WEB DESIGN
OVERVIEW
The web design process starts from a visual concept, which you
could sketch by hand or with software like Photoshop. Then, you
use HTML and CSS along with JavaScript to build the Website.
 HTML handles the basic structure and ‘bones’ of your web
page.
 CSS handles the style and appearance of the web page, while
 JavaScript handles the behaviors of the web page.
OBJECTIVES
By the end of this course, we will be able to:
 Use a text editor to author an HTML
document.
 Use basic tags to denote paragraphs,
emphasis or special type.
 Create hyperlinks to other documents.
 Create an email link.
 Add images to your document.
 Use a table for layout.
 Apply colors to your HTML document.
PREREQUISIT
Text Editor:
ES
 Notepad
 Notepad++
 Sublime etc.
Internet/Web Browser:
 Internet Explorer
 Maxilla Firefox
 Google Chrome etc.
Q: What is Notepad and where do I get it?
A: Notepad is the default Windows text editor. On most
Windows systems.
INTRODUCTION TO
HTML
Welcome to HTML Basics. This course will leads you
through the basics and the advanced of Hyper Text
Markup Language
(HTML).

HTML is the building block for web pages.


You will learn to use HTML to author an HTML page
to display in a web browser.
With HTML you can design your own Web site.
What is HTML?
 HTML (Hypertext Markup Language)
 HTML is the building block/bone of a website
 HTML standards are developed under the authority of
the World Wide Web Consortium (W3C), headed by Tim
Lee
• http://www.w3c.org
 HTML is the set of "markup <tags>" symbols or codes
inserted in a file, intended for display on a World Wide
Web browser.
 The markup tells the Web browser how to display a Web
page's text, images, sound and video files for the user.

HTML
File/Document
The documents themselves are plain text
files with special “<tags>“ or codes that a
web browser uses to interpret and display
information on your computer screen.
The file must be saved with an htm or
html file extension (.htm or .html) for the
computer or the web browser to be able
recognize it as a web page.
HTML Documents =
HTML documentsWeb Pages
describe web pages
An HTML file must have an htm or html file
extension
HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer
or Firefox) is to read HTML documents and display
them as web pages. The browser does not display
the HTML tags, but uses the tags to interpret the
content of the page.
An HTML file can be created using a simple text
editor
HTML Tags/Elements
HTML markup tags are usually called HTML tags
HTML tags" and "HTML elements" are often used to describe the same
thing.

HTML tags are keywords surrounded by angle brackets like <html>


HTML tags normally come in pairs like <b> and </b>

The first tag in a pair is the start tag/opening tags, the second tag is
the end tag/closing tags
HTML element is everything between the start tag and the end tag,
including the tags

The text between the start and end tags is the element content
 HTML tags are not case sensitive, <b> means the same as <B>
HTML Elements
Example of HTML Element:
<tagname>content</tagname>

<tag>This is the content of the


element</tag>
Opening Content Closing
tag tag
HTML - Getting
Started
Writing HTML Using Notepad
or TextEdit
 HTML can be edited by using a professional
HTML editor like:
 Adobe Dreamweaver
 Microsoft Expression Web
 CoffeeCup HTML Editor

However, for learning HTML, it is recommend a


text editor like Notepad (PC) or TextEdit (Mac). It
is believe using a simple text editor is a good way
to learn HTML.
Steps to create first web
page with Notepad
Step 1: Start Notepad
To start Notepad go to:
Start
All Programs
Accessories
Notepad
Step 2: Edit Your HTML with Notepad
Type your HTML code into your Notepad.
EXAMPLE 1
<!DOCTYPE html>
<html>

<head>
<title>MY FIRST WEB PAGE</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Steps to create first web page with
Notepad
Step 3: Save Your HTML
Select Save as.. in Notepad's file menu.
When you save an HTML file, you can use either
the .htm or the .html file extension.
There is no difference, it is entirely up to you.
Step 4: Run the HTML in Your Browser
Start your web browser and open your html file
from the File,Open menu, or just browse the
folder and double-click your HTML file.
HTML Document
• The HTML document is divided into two major
parts: Structure
• HEAD: contains information about the
document:
• Title of the page (which appears at the top of the
browser window)
• Meta tags: used to describe the content (used by
Search engines)
• JavaScript and Style sheets generally require
statements in the document Head

• BODY: Contains the actual content of the


document
• This is the part that will be displayed in the
HTML Document
Structure
Below is a visualization of an HTML
page structure:
<!DOCTYPE html>
< html>
<head>
<title>This a Heading</title>
</head>

<body>

<h1>This a Heading</h1>

<p>This is a paragraph.</p>
</body>

< / html>
Example
Explained
The <!DOCTYPE> Declaration
There are many different documents on the
web.
a browser can only display an HTML page
100% correctly if it knows the HTML type and
version used.
The <!DOCTYPE> declaration helps the
browser to display a web page correctly.
Common Declarations
HTML5
< !DOCTYPE html>
Example
 Explained
The second tag in your HTML document is <html>. This
tag tells your browser that this is the start of an HTML
document. The last tag in your document is </html>.
This tag tells your browser that this is the end of the
HTML document.
 The text between the <head> tag and the </head>
tag is header information. Header information is not
displayed in the browser window.
 The text between the <title> tags is the title of your
document. The title is displayed in your browser's
caption.
 The text between the <body> tags is the text that will
be displayed in your browser.
 The text between the <h1> and </h1> tags will be
displayed as the headline of your web page.
Nested
Tags/Element
Nested HTML Elements
• HTML documents consist of nested HTML elements.
• Most HTML elements can be nested (can contain other HTML elements).
• When you enclose an element in with multiple tags, the last tag opened
should be the first tag closed.
For example:
<p><b><em>This is NOT the proper way to close nested
tags.</p></em></b>
<p><b><em>This is the proper way to close nested tags. </em></b></p>

Note: It doesn't matter which tag is first, but they must be


closed in the proper order.
Edit Previous Work
Steps to continue editing or coding your HTML
document after you have close the entire work or
project.
 Open your text editor and click on File at the menu
bar and select open on the drop down menu. (Or
simply Hit Crtl+O on your Keyboard).
 Browse and located the project Folder or
Directory you working on.
(Use the right panel on the opened dialogue box to
locate the folder).

 Select the HTML file you want to edit or continue


working on.
Headings and
 HTML Headings
Paragraph
HTML headings are defined with the
<h1> to <h6> tags.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>…
 HTML Paragraphs
HTML paragraphs are defined with the
<p> tag
<p>This is a paragraph.</p>
<p>This is another
paragraph.</p>
HTML
Attributes
 HTML elements can have attributes
 Attributes provide additional information about an
element or it is the properties that extend or refine the
tag’s functions.
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value“
 Attribute values should always be enclosed in quotes.
 Double style quotes are the most common, but single style
quotes are also allowed.
 Attribute names and attribute values are case-insensitive.

Example: <body bgcolor=“red”></body>


Cont. HTML Attributes

 Attributes are added within a tag to extend a tag’s action.


 You can add multiple attributes within a single tag.
<body bgcolor=“khaki” text=“#000000” link=“blue” vlink=“brown”
alink=“black”>

 Each attribute should be separated by one or more spaces.


 Attributes Values are limited to 1024 characters in length.
HTML Tip: Use Lowercase
Attributes
• Attribute names and attribute values are case-insensitive.
• However, the World Wide Web Consortium (W3C) recommends
lowercase attributes/attribute values in their HTML 4
recommendation.
• Newer versions of (X)HTML will demand lowercase attributes.
• HTML Attributes Reference
• A complete list of legal attributes for each HTML element is listed in
on W3School website: http://www.w3schools.com/tags/default.asp
Below is a list of some attributes that are standard for most HTML
Attribute
elements: Value Description
class classname Specifies a classname for an element
id id Specifies a unique id for an element
style style_definition Specifies an inline style for an element
Specifies extra information about an element
title tooltip_text
(displayed as a tool tip)
Questions ?

You might also like