WEB DESIGN
INTRODUCTION TO WEB DESIGN.
(Programming in HTML and CSS)
The Beginners’ Guide to HTML
+254719369370 Online Coding Club
[email protected] by Jackson
WHAT IS HTML
Html stands for Hyper Text Markup language, It's a
programming language for the web, HTML is used to develop
WebPages & Websites.
HTML has been used to create website in the modern
industry.
No previous knowledge required to learn HTML. It Simple
and Easy to learn.
+254719369370 Creative Online Coding Club
[email protected] by Jackson
WHAT IS A WEBSITE
A collection of documents known as WebPages (or pages)
that contain information; ¤ Images, word, videos.
What is webpage ? ¨ A document or an information
resource that can be accessed through web browser
A web browser is a computer program that is used to
access a webpage.
+254719369370 Creative Online Coding Club
[email protected] by Jackson
MAJOR WEB BROWSERS
+254719369370 Creative Online Coding Club
[email protected] by Jackson
GETTING STARTED
We are going to Learn HTML- a programming language
for the web. With this, you will equipped create desktop
and mobile websites easily.
Tools for Development: In order to program HTML our
computers need to have an Editor. In this course we will
be using Sublime Text 3: Download here if it's not
installed already. http://www.sublimetext.com/3
+254719369370 Creative Online Coding Club
[email protected] by Jackson
WHY AN HTML EDITOR
An HTML editor is a tool that helps us to write your
program, in this case a Website.
An HTML editor is much better, gives you the tools to
make sure that your program is written well…or at least
written properly... and easy to understand
+254719369370 Online Coding Club
[email protected] by Jackson
HTML TAGS
What are Tags in HTML?
The basic structure of an HTML document includes tags,
which surround content and apply meaning to it.
+254719369370 Online Coding Club
[email protected] by Jackson
HTML TAGS
What are Tags in HTML?
A tag is a command in a web page that tells the browser
to do something. Tags are enclosed in less than (<) and
greater than (>) signs. An example of a tag is <html>
The basic structure of an HTML document includes tags,
which surround content and apply meaning to it.
+254719369370 Online Coding Club
[email protected] by Jackson
HTML Continued…
The major points of HTML are given below:
HTML stands for Hyper Text Markup Language.
HTML is used to create web pages.
HTML is widely used language on the web.
We can create static website by HTML only.
+254719369370 Online Coding Club
[email protected] by Jackson
HTML
THE HTML Doctype
DOCTYPE
The DOCTYPE declaration differs between HTML
versions. The
HTML 5 doctype declaration is given below:
<!DOCTYPE html>
The doctype is the first line in your program, it tells the
browsers the version/type of HTML you’re using, In this
case HTML 5
+254719369370 Creative Online Coding Club
[email protected] by Jackson
HTML DOCTYPE
This is the HTML 5 Doctype
<!DOCTYPE>
<html>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
+254719369370 Creative Online Coding Club
[email protected] by Jackson
HTML ELEMENTS
DOCTYPE: It defines the document type.
html : Text between html tag describes the web
document.
body : Text between body tag describes the body
content of the page that is visible to the end user.
h1 : Text between h1 tag describes the heading of the
webpage.
p : Text between p tag describes the paragraph of the
webpage.
+254719369370 Creative Online Coding Club
[email protected] by Jackson
HTML SYNTAX
• Syntax are rules that are defined by HTML
and MUST be followed.
• Below are the Tags rule:
<tag> content </tag>
Put any
Open tag Close tag
Content here
+254719369370 Creative Online Coding Club
[email protected] by Jackson
HTML TAG EXAMPLES
Note: HTML Tags are always written in lowercase
letters.
The basic HTML tags are given below:
<p> Paragraph Tag </p>
<h1> Heading Tag (heading level one)</h1>
<h2> Heading Tag (heading level two)</h2>
<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag</u>
<hr> for the horizontal rule.
+254719369370 Creative Online Coding Club
[email protected] by Jackson
HTML DOCUMENTS
All HTML documents must start with a
document type declaration: <!DOCTYPE
html>.
The HTML document itself begins with
<html> and ends with </html>.
The visible part of the HTML document is
between <body> and </body>.
+254719369370 Creative Online Coding Club
[email protected] by Jackson
HEADING LEVELS
YOUR CODE
HTML headings are defined with the
<h1> to <h6> tags.
<h1> defines the most important RESULT ON THE BROWSER
heading. <h6> defines the least
important heading:
+254719369370 Creative Online Coding Club
[email protected] by Jackson
OTHER HTML TAGS
<img> for adding images
<ol> for adding ordered list of items
<li> for defining an individual list item
<ul> for defining unordered list of items
<table> for adding a table. Tables allows one to represent
date/information a tabular format.
<th> for defining a table column. In full it stands for table
heading
<tr> for table row.
<td> for defining a cell inside a row. In full
it stands for table data
Tables are made up of columns and rows. In html column is
represented by the <th> tag while row is <tr> tag
+254719369370 Creative Online Coding Club
[email protected] by Jackson
ADDING A TABLE
+254719369370 Creative Online Coding Club
[email protected] by Jackson
HTML FORM
Components of a Form
Label
input field
Submit button
Input Types include the following;
text
email
password
number
radio
checkbox
date
tel for telephone
submit
+254719369370 Creative Online Coding Club
[email protected] by Jackson
HTML FORM
+254719369370 Creative Online Coding Club
[email protected] by Jackson
