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):
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 | |
| | |
| | |
| | |
| | |
---------------------------------------
