Scribd
Upload
10 views

HTML

The document provides an introduction to HTML (Hypertext Markup Language), which is the standard markup language used to create web pages. It describes some key HTML elements and tags such as <html>, <head>, <title>, <body>, <h1>, <p>, <a>, <img>, and <form> that are used to define the structure and content of web pages. It also explains how a basic HTML document is constructed and provides steps to create a simple web page using a text editor.

Uploaded by

hamA lol
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views

HTML

The document provides an introduction to HTML (Hypertext Markup Language), which is the standard markup language used to create web pages. It describes some key HTML elements and tags such as <html>, <head>, <title>, <body>, <h1>, <p>, <a>, <img>, and <form> that are used to define the structure and content of web pages. It also explains how a basic HTML document is constructed and provides steps to create a simple web page using a text editor.

Uploaded by

hamA lol
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 45

INTRODUCTION TO WEB PROGRAMMING

0731213
LECTURE 1
WHAT IS HTML?
WHAT IS HTML?

• HTML is the standard markup language for creating Web pages.


• HTML stands for Hyper Text Markup Language
• HTML describes the structure of Web pages using markup
• HTML elements are the building blocks of HTML pages
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
• Browsers do not display the HTML tags, but use them to render the content of the
page
A SIMPLE HTML DOCUMENT

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
EXAMPLE EXPLAINED

• The <!DOCTYPE html> declaration defines this document to be HTML5


• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the document
• The <title> element specifies a title for the document
• The <body> element contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph
HTML TAGS

• HTML tags are element names surrounded by angle brackets:


<tagname>content goes here...</tagname>
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a forward slash inserted before the
tag name
• Tip: The start tag is also called the opening tag, and the end tag the closing tag.
WEB BROWSERS

• The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML
documents and display them.
• The browser does not display the HTML tags, but uses them to determine how to
display the document:
HTML PAGE STRUCTURE

Only the content inside


the <body> section (the
white area above) is
displayed in a browser.
STEPS TO CREATE A WEB PAGE

Follow the four steps below to create your first web page with Notepad/Notepad++ or
TextEdit.
• Step 1: Open Notepad/Notepad++ or TextEdit
• Step 2: Write Some HTML into Notepad/Notepad++ or TextEdit
STEPS TO CREATE A WEB PAGE

Follow the four steps below to create your first web page with Notepad/Notepad++ or
TextEdit.
• Step 3: Save the HTML Page
STEPS TO CREATE A WEB PAGE

Follow the four steps below to create your first web page with Notepad or TextEdit.
• Step 4: View the HTML Page in Your Browser
LECTURE 2
HTML TAGS (1)
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>.
<!DOCTYPE html>

<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML BASIC TAGS

HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least important heading.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
HTML BASIC TAGS

HTML Paragraphs
• HTML paragraphs are defined with the <p> tag.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML BASIC TAGS

HTML Line Break


• HTML Line Break is defined with the <br/> tag
• HTML elements with no content are called empty elements. Empty elements do not have an
end tag such as the Line Break element
<br/>
HTML Links
• HTML links are defined with the <a> tag
• The link's destination is specified in the href attribute.
• Attributes are used to provide additional information about HTML elements.
<a href="https://www.google.com">This is a link</a>
<a href="page1.html">This is a link</a>
<a href="pages/page1.html">This is a link</a>
HTML BASIC TAGS

HTML Images
• HTML images are defined with the <img> tag.
• The source file (src), alternative text (alt), width, and height are provided as attributes.
• The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
<img src="image.jpg" alt="This is an image" width="104" height="142">
<img src="images/image.jpg" alt="This is an image" width="104" height="142">
HTML BASIC TAGS

HTML button
• HTML button defines a clickable button.
<button type="button">Click Me!</button>
• Inside a <button> element you can put content, like text or images. This is the
difference between this element and buttons created with the <input> element.
• Tip: Always specify the type attribute for a <button> element. Different browsers use
different default types for the <button> element.
HTML BASIC TAGS

HTML div
• HTML div defines a division or a section in an HTML document.
• The <div> tag is used to group block-elements to format them with CSS.
<div id="myId">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
Tip: The <div> element is very often used together with CSS, to layout a web page.
Note: By default, browsers always place a line break before and after the <div>
element. However, this can be changed with CSS.
HTML BASIC TAGS

HTML span
• HTML span is used to group inline-elements in a document.
• The <span> tag provides no visual change by itself.
• The <span> tag provides a way to add a hook to a part of a text or a part of a
document.
<p>My mother has <span style="color:blue">blue</span> eyes.</p>

Tip: When a text is hooked in a <span> element, you can style it with CSS, or
manipulate it with JavaScript.
LECTURE 3
HTML TAGS (2)
NESTED HTML ELEMENTS

• HTML elements can be nested (elements can contain elements).


• All HTML documents consist of nested HTML elements.
<a href="https://www.google.com">
<img src="image.jpg" alt="google.com" width="104" height="142">
</a>
HTML ELEMENTS

Single or Double Quotes?


• Double quotes around attribute values are the most common in HTML, but single
quotes can also be used.
• In some situations, when the attribute value itself contains double quotes, it is
necessary to use single quotes:
<a href="page1.html">This is a link</a>
<a href='page1.html'>This is a link</a>
THE HTML <HEAD> ELEMENT
• The <head> element is a container for metadata. HTML metadata is data about the
HTML document. Metadata is not displayed.
• The <head> element is placed between the <html> tag and the <body> tag
• Metadata typically define the document title, character set, styles, links, scripts, and
other meta information.
• The <meta> tag defines metadata about an HTML document. Metadata is data
(information) about data. <meta> tags always go inside the <head> element
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8" />
</head>
<body>
.
.
.
HTML COMMENT TAGS

• You can add comments to your HTML source by using the following syntax
<!-- Write your comments here -->
• Notice that there is an exclamation point (!) in the opening tag, but not in the closing
tag.
• Comments are not displayed by the browser, but they can help document your HTML
source code.
<!-- This is a comment -->

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

<!-- Remember to add more information here -->


<!--This is a comment. Comments are not displayed in the browser-->
LECTURE 4
HTML FORM (1)
HTML FORM EXAMPLE

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
THE <FORM> ELEMENT

• The HTML <form> element defines a form that is used to collect user input
• An HTML form contains form elements.
• Form elements are different types of input elements, like text fields, checkboxes,
radio buttons, submit buttons, and more.
<form>
.
form elements
.
</form>
THE <INPUT> ELEMENT

• The <input> element is the most important form element.


• The <input> element can be displayed in several ways, depending on
the type attribute.

Type Description
>"input type="text< Defines a one-line text input field
>"input type="radio< Defines a radio button (for selecting one of many choices)
>"input type="submit< Defines a submit button (for submitting the form)
TEXT INPUT

<input type="text"> defines a one-line input field for text input

<form>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
</form>
Note: The form itself is not visible. Also note that the default width of a text field is 20
characters.
PASSWORD INPUT

<input type="password"> defines a password field


The characters in a password field are masked (shown as asterisks or circles).

<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
RADIO BUTTON INPUT

<input type="radio"> defines a radio button.

<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>

Note: The form itself is not visible. Also note that the default width of a text field is 20
characters.
CHECKBOX INPUT

<input type="checkbox"> defines a checkbox.


Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
THE VALUE ATTRIBUTE

The value attribute specifies the initial value for an input field
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>
THE SUBMIT BUTTON

<input type="submit"> defines a button for submitting the form data to a form-
handler.
• The form-handler is typically a server page with a script for processing input data.
• The form-handler is specified in the form's action attribute

<form action="action_page.php">
First name:<br><input type="text" name="firstname" value="Mickey"><br>
Last name:<br><input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
THE <SELECT> ELEMENT

The <select> element defines a drop-down list:


<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
• The <option> elements defines an option that can be selected.
• By default, the first item in the drop-down list is selected.
• To define a pre-selected option, add the selected attribute to the option:

<option value="fiat" selected>Fiat</option>


THE <TEXTAREA> ELEMENT

The <textarea> element defines a multi-line input field (a text area)


<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
• The rows attribute specifies the visible number of lines in a text area.
• The cols attribute specifies the visible width of a text area.
• This is how the HTML code above will be displayed in a browser
LECTURE 5
HTML FORM (2)
THE ACTION ATTRIBUTE

• The action attribute defines the action to be performed when the form is submitted.
• Normally, the form data is sent to a web page on the server when the user clicks on
the submit button.
• In the example above, the form data is sent to a page on the server called
"action_page.php". This page contains a server-side script that handles the form data
• If the action attribute is omitted, the action is set to the current page.
<form action="action_page.php">
THE METHOD ATTRIBUTE

The method attribute specifies the HTTP method (GET or POST) to be used when
submitting the form data
<form action="action_page.php" method="get">
<form action="action_page.php" method="post">
GET VS. POST

When to Use GET?


• The default method when submitting form data is GET.
 GET must NOT be used when sending sensitive information! GET is best suited for
short, non-sensitive, amounts of data, because it has size limitations too
• However, when GET is used, the submitted form data will be visible in the page
address field
action_page.php?firstname=Mickey&lastname=Mouse
When to Use POST?
• Always use POST if the form data contains sensitive or personal information. The
POST method does not display the submitted form data in the page address field.
• POST has no size limitations, and can be used to send large amounts of data.
THE NAME ATTRIBUTE

• Each input field must have a name attribute to be submitted.


• If the name attribute is omitted, the data of that input field will not be sent at all.
• This example will only submit the "Last name" input field
<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
SELF STUDY

• HTML Symbols (https://www.w3schools.com/html/html_symbols.asp)


• HTML Charset (https://www.w3schools.com/html/html_charset.asp)
• HTML Tables (https://www.w3schools.com/html/html_tables.asp)
• HTML Lists (https://www.w3schools.com/html/html_lists.asp)
• HTML5 New Elements (https://www.w3schools.com/html/html5_intro.asp)
REFERENCES
• https://www.w3schools.com/
• Robin Nixon, Learning PHP, MySQL, JavaScript, and CSS, 2013
• Mike McGrath, PHP & My SQL in easy steps, 2012.
THE END

You might also like