Scribd
Upload
51 views

HTML Basics: This Work Is Licensed Under A

The document discusses the basics of HTML including HTML tags, structure of an HTML document, text formatting, headings, images, comments, and lists. It also provides examples of HTML code for these various elements and concepts.

Uploaded by

Raya Ahmada
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
51 views

HTML Basics: This Work Is Licensed Under A

The document discusses the basics of HTML including HTML tags, structure of an HTML document, text formatting, headings, images, comments, and lists. It also provides examples of HTML code for these various elements and concepts.

Uploaded by

Raya Ahmada
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 83

LECTURE 1

HTML Basics

This work is licensed under a


Creative Commons Attribution- Share Alike 4. 0 International Lic
ense
GO TO menti.com and Enter the 5267 3550
https://www.mentimeter.com/s/4b77b56820d76311c78f6719e2b3e733/8a
ea88f85bba
Contents
● Tools Needed
● How the Web Works
● HTML Introduction
● Working with Links
● Working with Images
● HTML Tables
● HTML Forms
● HTML Validation
Tools you Need

● Web Browser
○ Any of your choice. (Chrome is Recommended).
● Code Editor
○ VS Code
○ Sublime Text
○ Atom, and so on
For this course, we are using VS code, you can
download the latest version at
https://code.visualstudio.com/
Languages and Tools of Web
Development
● Every website has two parts:
○ Front-End - What you see in the browser (Visual Aspect).
■ Front-end developers use HTML, CSS and Javascript
○ Back-End - Behind the scene (Powers the Front-End)
How the Web Works

● URL - Uniform Resource Locator


○ Web pages (HTML documents), images, videos, etc
● Browser acts as a client to request a resource from another
computer (Web server).
● HTTP - Hypertext Transfer Protocol - For sending and
receiving requests and replies between clients and servers.
● DOM - Document Object Model
○ Represents all the building blocks of a page, like paragraphs of texts
images, links, etc
● The following video briefly explains on basic concepts of web
applications, how they work and the HTTP Protocol:
○ https://www.youtube.com/watch?v=RsQ1tFLwldY
How the Web Works
HTML Introduction
We’ll learn …

● What HTML is
● What tags are
● What a basic web page look like
● What 3 HTML tags are required
● What HTML comments look like
● How to title your web page
● How to format the text on your web page
● How to create headings on your web page
● How to add pictures to your page
What is HTML?

● Hyper Text Markup Language is the


standard markup language for creating
web pages and web applications.
● Building blocks of the Web.
● NOT a programming language.
● Along with CSS and Javascript, it is one of
the cornerstones of the World Wide Web
(WWW).
HTML The Skeleton

● It provides tags to describe different types


of contents (elements) on your website -
For Example <header>, <link>, <div>
● This allows your browser to understand
what it is reading and how to render it.
● To make HTML page dynamic and
beautiful, Javascript and CSS is used.
● So think of HTML as a skeleton that comes
to life with CSS and Javascript.
JS The Brains

● Javascript will provide the brains and


muscles of the website allowing to interact
and re-render HTML content based on
user-input or data from a server.
● This makes your HTML dynamic rather
than static.
● Games and interactive applications can be
made with HTML.
CSS The Skin

● CSS will make our site presentable and


enhance the user experience of our site
visitors.
● CSS allows you to add color, modify sizes,
embed background images, and make
your design responsive for desktop and
mobile viewing alike.
Creating an HTML file

● Does not need a server


● Files must end with the .html extension
● Run in a web browser
● index.html is the root/home page of a
website.
HTML TAGS
● Look like this: < >
● Come in pairs (every begin tag must have an
end tag)
○ <html> </html> PAIRS
● TAGS do not show up on a web page
● There are 3 REQUIRED TAGS
○ 1. <html> </html> ONLY ONE
○ 2. <head> </head> ONLY ONE (maybe put a title
in here)
○ 3. <body> </body> ONLY ONE (stuff that shows
up)
Tag Syntax

● <tagname>Content</tagname>
● Some tags close themselves (Self closing tags - no
content)
○ <br/> or <br> in HTML5
○ <img src =” “ alt = “ “>
Basic Web Page (Boilerplate Tags)

<html>
<head> Head section

<title> My page </title>


</head> Body section
<body>
Hello this is my page • Tags don’t show up on the
</body> page

</html>
Head Elements and Scripts

● The <head> element is a container for


metadata (data about data) and is placed
between the <html> tag and the <body> tag.
● HTML metadata is data about the HTML
document. Metadata is not displayed.
● Metadata typically define the document title,
character set, styles, scripts, and other meta
information.
The HTML <meta> Element

● The <meta> element is typically used to


specify the character set, page description,
keywords, author of the document, and
viewport settings.
● The metadata will not be displayed on the
page, but are used by browsers (how to
display content or reload page), by search
engines (keywords), and other web services.
HTML <meta> Elements Examples
Define the character set used: <meta charset="UTF-8">

Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, JavaScript">

Define a description of your web page:

<meta name="description" content="Free Web tutorials">

Define the author of a page:

<meta name="author" content="John Doe">

Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">

Setting the viewport to make your website look good on all devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0">


Comments

● Explains what your code does, who wrote


it, when it is written.
● You can have them anywhere in your code
<!-- Here is my comment -- >
<!-- Written by Jill Hubbard, Sept 2009 -->
Title Element

● Goes inside the head element


● If you forget it, you’ll have an untitled web
page
● Looks like this:
<title> My Home page </title>
● Where does the title show up?
Doctype

● HTML5 - <!DOCTYPE HTML>


● Declaration to show that HTML5 is used in the page.
● More on HTML5 Declaration at:
○ https://www.w3schools.com/tags/tag_doctype.asp
Text Formatting
Text What It Does Example
formatting
type
paragraph Creates paragraphs of text <p> I’m my own paragraph </p>

Line break Makes the browser go to I’m Line 1. <br /> I’m Line 2.
the next line
Bold Makes the text bold <strong> I’m bold </strong>

Underline Makes the text underlined <u> I’m underlined </u>

Italic Makes the text italic <i> I’m italic </i>

Horizontal Line across the page <hr />


rule
Inline Vs. Block Level Elements

Inline Elements Block Elements


Do not start on a new Start on a new line
line
Take the necessary Take full width
width available
Examples are: <span>, Examples are: <div>,
<img>, <a> <p>, <form>,
<h1>...<h6>
Headings

● Creates different sections for your page


● <h#> </h#> replace # with an actual
number (1-6)
● 1 is the BIGGEST, 6 is the smallest
heading
● <h1> My heading </h1>
Pictures

● Put a picture on your page


● <img src=“Name of your picture.extension” />
○ Example: <img src=“me.jpg” width=“25%”/>

● The picture MUST be in the same folder as the


web page!
Let’s Use this stuff- Getting Started!
● Create a new folder called “ Project 1”
● Open up YOUR TEXT EDITOR save the file to your Project 1 folder.
Name It: project1.html
● Add all the required tags (What are they again?)
● Title your web page: GROUP NO. Project 1
● Add a comment on top of the <head> section listing your names and
the date
● In the <body>, add 2 headings. Title the first heading: “My
University” and the second: “Fun Stuff”
● Separate the headings with a horizontal rule.
● Find a picture of the University (use google images), download it
into your project 1 folder, and add it to the “My University” section of
your web page.
● Add a paragraph with 5 sentences to the “My University” section of
your page.
Review Questions

● What are HTML tags used for?


● What do HTML tags look like?
● What are the 3 required HTML tags?
● What is a comment for?
● What does the code for a comment look
like?
● In what section of your HTML code does
the title tag go?
Review Questions

● Where does the title show up on your


actual web page?
● What are headings used for and what
section of your HTML code do they go in?
● How do you make text show up bold on
your web page?
● How do you make text show up italic on
your web page?
Review Questions

● How do you force the browser to go to the


next line?
● How do you make a line show up across
your web page?
● How do you make a picture show up on
your web page?
Remember A Basic Web Page

<html>
<head> Head section

<title> My page </title>


</head> Body section
<body>
Hello this is my page
</body>
</html> • Tags don’t show up on the
page
Centering and changing the background
color
● <center> I’m in the center of the
page</center>
● <body bgcolor=“#XXXXXXXX”>
○ Replace the x’s with code for a specific
color
○ For reference regarding HTML
hexadecimal codes visit
https://www.w3schools.com/colors/color
s_picker.as
How To Make A List

● Write a code to show this up:

My Favorite courses are:


1. Interactive Website
2. ___________
3. ___________
Lists
● Ordered(numbered) list
<strong> My Favorite courses are: </strong>
<ol>
<li> Interactive Website</li>
<li> ____________</li>
<li> ____________</li>
</ol>
● Un-ordered (bulleted list)
○ Change the <ol> </ol> to <ul> </ul> and notice the
changes.
Project 2 – Create Lists
● Create a new folder called “Group no Project 2”
● Open up your editor and save the file to your Project 2
folder. Name It: project2.html
● Add all the required tags (What are they again?
● Title your web page: Group no Project 2
● Add a comment on top of the <head> section listing
your names, the course name and the date
● In the <body>, add two different lists (one numbered
and the other using bullets).
Project 2 – Pick a Theme
● Add a paragraph with AT LEAST 5 sentences to your page about
your theme.
○ Make 1 sentence bold
○ Make 1 sentence italic
○ Make 1 sentence underlined
○ Separate the sentences with line breaks

● Choose a background color for you page (or maybe a background


image if you’re really resourceful!)
● Add an ordered list related to your theme. Add a heading for your
list so people know what it’s about!
● Add an unordered list related to your theme, Add a heading for
your list so people know what it’s about!

● Add something fun that your find online: www.w3schools.com is


a good place to start!
HTML Links
What you’ll learn in this lesson:
● Link to a different page of your site
● Link to a different web sites
● More about attributes and elements
● Link to a picture
● Thumbnails (small picture links to a big picture)
● Email link
Links to a different web page
in your site
● Make another page using YOUR
EDITOR: page2.html
● Here’s how to connect (link) your
pages together
○ On page1.html type the following tag
■ <a href=“page2.html”> Click here for the next page </a>

Words that show up as


The page to jump
The link A link on the page
to
tag
Link to a different web site (like
google)
● On your web page in notepad type:
■ < a href=“http://www.google.com”> Click here for google </a>

Words that show up as


The site to jump
The link a link on the page
to
tag

● What’s the difference between this and a


link to another page in your site?
Attributes and Elements
● Attributes
● extra bits of information inside a tag.
● Attributes that are used to set various properties of
an element.
○ <img src=“name picture“ / >
○ <body bgcolor=“red” >
○ <a href=“page2.html”> I’m a link </a>

● Elements
○ Another name for the begin and end tag and everything in
between
○ Everything that is in-between and includes the <body> and
</body> tags is the body element.
○ <title> and </title> are tags, BUT <title>Rumple
Stiltskin</title> is a title element.
HTML5 Attributes

● Some attributes are defined globally and can be


used on any element, while others are defined
for specific elements only. All attributes have a
name and a value and look like as shown below
in the example.
● Following is the example of an HTML5 attributes
which illustrates how to mark up a div element
with an attribute named class using a value of
"example" −
● <div class = "example">...</div>
● Attributes may only be specified within start
tags and must never be used in end tags.
HTML5 Attributes

● More on HTML5 attributes can be found at:


○ https://www.tutorialspoint.com/html5/html5
_attributes.htm
Other useful links
● Links to a picture(click on words and open
a picture)
○ < a href=“picture.jpg”> Click here to see my picture
</a>
● Thumbnail (click on small pic to open big pic)
○ < a href=“BigPicture.jpg”> <img src =
“SmallPic.jgp” /> </a>
● Email Links
○ < a href=“mailto:[email protected]”> Email me
</a>
Let’s Use this stuff - LINKS!

● Make a second page for your site by opening notepad


and creating page2.html (file-> new, file -> save as)

● Open the first page and add a link called “Click Here to
See Second”. When you click on this link, it should
open the second page
● Open the second page and add a link called “Click Here
to See My First Page”. When you click on this link, it
should open your first page.
HTML

Working with Images


Pictures in a sub folder (Good Practice)
● Sometimes it easier to put all your pictures in a subfolder (folder inside your
project folder)

YOUR PROJECT 4 FOLDER

pictures
Project
folder
4.hml

Picture Picture Picture


1 2 3
Pictures in a sub folder

● In the <img> tag, you need to tell the browser


where to find the picture (starting from where
to web page is)

● <img src=“PictureFolderName/YourPicture.jpg” />


● Example: <img src=“pictures/me.jpg” />
LINKS TO DIFFERENT
SECTIONS ON A PAGE
•Use this so the user doesn’t have to scroll down on the page to
see different sections
About Me
Sports
Hobbies

Hello, I’m a student at Tualatin HS. I’m 15 and am taking


Algebra, freshman English, earth science, and social studies.

I love running. I’ve been on a track team since grade school.


I run 5 miles a day and plan on running the Shamrock in
a couple of weeks. My dream is to run in the Boston Marathon.

I like to read and listen to music in my spare time. I’m going to


Sasquatch in a few months and love the Decemberists!
LINKS TO DIFFERENT
SECTIONS ON A PAGE
● Called Named Anchors (each link has 2 parts)
● Look Like this
○ LINK <a href="#NAME">Text to act as hypertext</a>
○ NAMED <a name="NAME“ />Text to Link To

<a href=“#Me”> About Me </a>


About Me
<a href=“#Sports”> Sports </a>
Sports
<a href=“#Hobbies”> Hobbies </a>
Hobbies
<a name=“Me” />Hello, I’m a students
Hello, I’m a student at
at
Tualatin HS. ….
Tualatin HS.
I love running….
<a name=“Sports” /> I love running
Part 4 Assignment
● Make a copy of your project 3 folder and name
it “group no. Project 4”
● Open your project 4 folder and rename
project3.html to project4.html
● Open project4.html with YOUR EDITOR

● Create 2 additional headings and add a


paragraph of text to each sections.(here are
some examples of section headings)
○ My courses this semester
○ List of group members
○ What I like to do after college

● Separate the sections with horizontal lines


Part 4 Assignment (Cont..)

● Add links at the top of the page so that when


you click on the link, it takes you to that
section of the page.
HTML
Tables
What you’ll learn in this lesson:
● What are tables and why should you use them
● How to make a table
● How to put content inside your table
● How to make a navigation bar using tables
COLUMNS

THIS IS MY ROWS

SITE

Hello. This is pretty basic


but it showing you that I can
put things next to each
other!

This table has 2 rows and 2 columns


How to Make a 2X2 Table
Row 1 Col 1 Row 1 Col 2
<table border=“1”>
Row 2 Col 1 Row 2 Col 2
<tr>
<td>Row 1 col 1</td>
<td>Row 1 col 2</td>
</tr>
<tr>
<td>Row 2 col 1</td>
<td>Row 2 col 2</td>
</tr>
</table>
Combining the first 2 Row 1 Col 1 and Col 2
rows
Row 2 Col 1 Row 2 Col 2

<table border=“1”>
<tr>
<td colspan=“2”>Row 1 col 1 and 2</td>
</tr>
<tr>
<td>Row 2 col 1</td>
<td>Row 2 col 2</td>
</tr>
</table>
Row 1 and Row 2 Col Row 1 Col 2
Combining the 1

first 2 columns Row 2 Col 2

<table border=“1”>
<tr>
<td rowspan=“2”>Row 1 and Row 2 col 1</td>
<td>Row 1 Col 2</td>
</tr>
<tr>
<td>Row 2 col 2</td>
</tr>
</table>
Coloring Tables

● color the area behind the entire table


○ <table bgcolor=“#880000”>
● color the area behind a single row
○ <tr bgcolor=“#880000”>
● color the area behind a single cell
○ <td bgcolor=“#880000”>
Navigation Bar
Make a Table of Links

HOME MUSIC PICTURES VIDEOS

<table border =“1”>


<tr>
<td align=“center”> <a href = “index.html”> HOME </a> </td>
<td align=“center”> <a href = “music.html”> MUSIC </a> </td>
<td align=“center”> <a href = “pictures.html”> PICTURES </a> </td>
<td align=“center”> <a href = “videos.html”> VIDEOS </a> </td>
</tr>
</table>
Teacher Guided Classwork
● Lets practice
● Make a 2X2 table!
● Make a folder called “group no. Tables Practice”
● Add required tags and comment
● Now it’s table time!
○ Table1: 2X2 with content
○ Table2: merge rows
○ Table 3: merge columns
Formatting Tables

• Pick
how wide you want your table to be
• What’s the resolution of your computer screen?

•Figure out the width of each column


• The width will be the same for each row of your table
• How wide are your pictures? They need to fit in your
column
• Resize your pictures if necessary
• change the size in the image tag
• <img src=“me.jpg” width = “400px” />
Table with 2 rows and 3 columns
Controlling the width of your table and the width of each column

1200 pixels wide

I’m 1200 pixels wide

I’m 500 pixels wide. I’m 300 p I’m 400 pixels


Anything put here Anything put wide
must be < 500 pixels here must be < Anything put
wide! 300 pixels wide! here must be <
400 pixels
wide!
Here’s the code to make it!
<table width = “1200px” style=“font-family:arial; color:white; font-size:12pt”>
<tr>
<td colspan = “3” align=“center”>
My width is 1200 pixels. If I make my banner 1200pixels wide, it will fill this box
</td>
</tr>
<tr>
<td width = “500px”>
My width is 500 pixels. If I put a picture here, it’s maximum width is 500 pixels
</td>
<td width = “300px”>
My width is 300 pixels. If I put a picture here, it’s maximum width is 300 pixels.
</td>
<td width = “400px”>
My width is 400 pixels. If I put a picture here, it’s maximum width is 400 pixels. Notice
that is I add together the widths of each box on this row, it equals 1200 pixels!
</td>
</tr>
Part 5
● Make A New Folder Called “group no. Lesson 5”
● Open YOUR EDITOR and save the file in your folder. Name it
project5.html
● Add the required tags (WATCH IDENTATION)
● Add a comment
● Now let’s add a table to the body
Make Me in the body! Your Theme is MY
UNIVERSITY

Questions you’ll need to


Heading about UNIVERSITY! answer
•# of rows?

This to stay on the Link to your second •# of columns?


page page
•Table width?

•Column width?

Cool pic of Text about the


The University University

Footer (copyright symbol, group no, date)


Table with HTML5 tags
<table>
<thead>
<th>Heading1</th>
<th>Header2</th>
</thead>
<tbody>
<td>Cell Data</td>
<td>Cell Data </td>
</tbody>
</table>
HTML Forms
What are forms?
● <form> is just another kind of HTML tag
● HTML forms are used to create GUIs on Web pages
○ Usually the purpose is to ask the user for
information
○ The information is then sent back to the server
● A form is an area that can contain form elements
○ The syntax is: <form parameters> ...form elements...
</form>
○ Form elements include: buttons, checkboxes, text
fields, radio buttons, drop-down menus, etc
■ Other kinds of HTML tags can be mixed in with the form elements

○ A form usually contains a Submit button to send


the information in the form elements to the server
70
The <form> tag
● The <form arguments> ... </form> tag encloses form
elements (and probably other HTML as well)
● The arguments to form tell what to do with the user
input
○ action="url" (required)
■ Specifies where to send the data when the Submit button is clicked

○ method="post"
■ Form data is sent in the body of the URL request

○ target="target"
■ Tells where to open the page sent as a result of the request
■ target= _blank means open in a new window
■ target= _top means use the same window

71
The <input> tag
● Most, but not all, form elements use the input tag,
with a type="..." argument to tell which kind of
element it is
○ type can be text, checkbox, radio, password, hidden, submit,
reset, button, file, or image
● Other common input tag arguments include:
○ name: the name of the element
○ value: the “value” of the element; used in different ways for
different values of type
○ readonly: the value cannot be changed
○ disabled: the user can’t do anything with this element
○ Other arguments are defined for the input tag but have
72
meaning only for certain values of type
Text input
A text field:
<input type="text" name="textfield" value="with an initial
value">

A multi-line text field


<textarea name="textarea" cols="24"
rows="2">Hello</textarea>

A password field:
<input type="password" name="textfield3"
value="secret">

• Note that two of these use the input tag, but one uses 73

textarea
Buttons
• A submit button:
<input type="submit" name="Submit" value="Submit">
• A reset button:
<input type="reset" name="Submit2" value="Reset">
• A plain button:
<input type="button" name="Submit3" value="Push Me">

• submit: send data


• reset: restore all form elements to their
initial state
• button: take some action as specified by
JavaScript

• Note that the type is input, not “button”


74
Checkboxes
● A checkbox:
<input type="checkbox" name="checkbox”
value="checkbox" checked>

● type: "checkbox"
● name: used to reference this form element from
JavaScript
● value: value to be returned when element is
checked
● Note that there is no text associated with the
checkbox—you have to supply text in the 75

surrounding HTML
Radio buttons
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">
male<br>
<input type="radio" name="radiobutton" value="myValue2" checked>
female

• If two or more radio buttons have the same name, the


user can only select one of them at a time
– This is how you make a radio button “group”
• If you ask for the value of that name, you will get the
value specified for the selected radio button
• As with checkboxes, radio buttons do not contain any
text 76
Drop-down menu or list
● A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>

● Additional arguments:
○ size: the number of items visible in the list (default is "1")
○ multiple: if set to "true", any number of items may be
selected (default is "false")

77
Hidden fields
● <input type="hidden" name="hiddenField" value="nyah">
&lt;-- right there, don't you see it?

● What good is this?


○ All input fields are sent back to the server, including hidden
fields
○ This is a way to include information that the user doesn’t need
to see (or that you don’t want her to see)
○ The value of a hidden field can be set programmatically (by
JavaScript) before the form is submitted

78
A complete example
<html>
<head>
<title>Get Identity</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<input type="radio" name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female</p>
</form>
</body>
</html>
More on HTML5 can be found at this link:
https://www.tutorialspoint.com/html5/html5_web_forms2.htm

79
HTML Validation

For validation of your HTML Pages, visit


https://validator.w3.org/
HTML5 Document
The following tags have been introduced for better structure −
● section − This tag represents a generic document or application section. It
can be used together with h1-h6 to indicate the document structure.
● article − This tag represents an independent piece of content of a
document, such as a blog entry or newspaper article.
● aside − This tag represents a piece of content that is only slightly related to
the rest of the page.
● header − This tag represents the header of a section.
● footer − This tag represents a footer for a section and can contain
information about the author, copyright information, et cetera.
● nav − This tag represents a section of the document intended for
navigation.
● dialog − This tag can be used to mark up a conversation.
● figure − This tag can be used to associate a caption together with some
embedded content, such as a graphic or video.
Layout Elements
THE END

You might also like