WEB PROGRAMMING

 HTML is the standard mark-up language for Web pages. With HTML
you can create your own Website.
 HTML describes the structure of a Web page

 HTML elements tell the browser how to display the content

 HTML elements label pieces of content such as "this is a heading", "this
is a paragraph", "this is a link", etc

 An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>

Web Browsers

 The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read

HTML documents and display them correctly.

HTML Page Structure

The <!DOCTYPE> Declaration

 The <!DOCTYPE> declaration represents the document type, and helps

browsers to display web pages correctly.

HTML Headings
 HTML headings are defined with the <h1> to <h6> tags.
 <h1> defines the most important heading. <h6> defines the least
important heading

HTML Paragraphs

 HTML paragraphs are defined with the <p> tag

HTML Links
HTML links are defined with the <a> tag

<a href="https://www.abc.com">This is a link</a>

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as
attributes

<img src="xyz.jpg" alt="abc.com" width="104" height="142">

View HTML Source Code:

 Right-click in an HTML page and select "View Page Source" (in

Chrome) or "View Source" (in Edge), or similar in other browsers.
 This will open a window containing the HTML source code of the page.

Inspect an HTML Element:

 Right-click on an element (or a blank area), and choose "Inspect" or

"Inspect Element" to see what elements are made up of (you will see both
the HTML and the CSS).
 You can also edit the HTML or CSS on-the-fly in the Elements or Styles
panel that opens.

HTML Attributes
  All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

HTML Horizontal Rules

 The <hr> tag defines a thematic break in an HTML page, and is most
often displayed as a horizontal rule.
 The <hr> element is used to separate content (or define a change) in an
HTML page

HTML Line Breaks

 The HTML <br> element defines a line break.
 Use <br> if you want a line break (a new line) without starting a new
paragraph

The HTML <pre> Element

 The HTML <pre> element defines preformatted text.

 The text inside a <pre> element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line breaks:

The HTML Style Attribute

 Setting the style of an HTML element, can be done with
the style attribute.
 The HTML style attribute has the following syntax:
 <tagname style="property:value;">

HTML Formatting Elements

Formatting elements were designed to display special types of text:

 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML <blockquote> for Quotations

 The HTML <blockquote> element defines a section that is quoted from
another source.
 Browsers usually indent <blockquote> elements.

HTML <q> for Short Quotations

 The HTML <q> tag defines a short quotation.
 Browsers normally insert quotation marks around the quotation.

HTML Links - Hyperlinks

  HTML links are hyperlinks.
 You can click on a link and jump to another document.
 When you move the mouse over a link, the mouse arrow will turn into a
little hand.
 A link does not have to be text. A link can be an image or any other
HTML element!

HTML Links - Syntax

 The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

 By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red

HTML Links - The target attribute

 The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

 _self - Default. Opens the document in the same window/tab as it was

clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window
HTML Links - Use an Image as a Link

 To use an image as a link, just put the <img> tag inside the <a> tag:

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Link to an Email Address

 Use mailto: inside the href attribute to create a link that opens the user's
email program (to let them send a new email):

<a href="mailto:[email protected]">Send email</a>

HTML Images Syntax

 The HTML <img> tag is used to embed an image in a web page.

 Images are not technically inserted into a web page; images are linked to
web pages.
 The <img> tag creates a holding space for the referenced image.

The <img> tag has two required attributes:

 src - Specifies the path to the image

 alt - Specifies an alternate text for the image.
 <img src="url" alt="alternatetext">

<img src="img_chania.jpg" alt="Flowers in Chania">

<img src="img_girl.jpg" alt="Girl in a

jacket" style="width:500px;height:600px;">

HTML Table

 The <table> tag defines an HTML table.

 Each table row is defined with a <tr> tag.
 Each table header is defined with a <th> tag.
 Each table data/cell is defined with a <td> tag.
 By default, the text in <th> elements are bold and centered.
 By default, the texts in <td> elements are regular and left-aligned.

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
 <td>94</td>
</tr>
</table>

HTML Table - Add Cell Padding

 Cell padding specifies the space between the cell content and its borders.

th, td {
padding: 15px;
}
<th colspan="2">Telephone</th>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>

HTML Lists

 HTML lists allow web developers to group a set of related items in lists.

Unordered HTML List

 An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
 The list items will be marked with bullets (small black circles) by default:

<ul>
<li>Coffee</li>
 <li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List

 An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
 The list items will be marked with numbers by default:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HTML Description Lists

 A description list is a list of terms, with a description of each term.

 The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Forms
 An HTML form is used to collect user input. The user input is most often
sent to a server for processing.

 The <form> Element

 The HTML <form> element is used to create an HTML form for user
input:

<form>
.
form elements
.
</form>
 The <form> element is a container for different types of input elements,
such as: text fields, checkboxes, radio buttons, submit buttons, etc.

The <input> Element

An <input> element can be displayed in many ways, depending on

the type attribute.

Type Description

<input type="text"> Displays a single-line text input field

 <input type="radio"> Displays a radio button (for selecting one of many choic

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

HTML <frame> Tag

 HTML frames allow authors to present documents in multiple views,

which may be independent windows or sub windows.
 For example, within the same window, one frame might display a static
banner, a second a navigation menu, and a third the main document that
can be scrolled through or replaced by navigating in the second frame.

<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<NOFRAMES>
 <P>This frameset document contains:
<UL>
<LI><A href="contents_of_frame1.html">Some neat contents</A>
<LI><IMG src="contents_of_frame2.gif" alt="A neat image">
<LI><A href="contents_of_frame3.html">Some other neat
contents</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
---------------------------------------
| | |
| | |
| Frame 1 | |
| | |
| | |
|---------| |
| | Frame 3 |
| | |
| | |
| | |
| Frame 2 | |
| | |
| | |
| | |
| | |
---------------------------------------