Scribd
Upload
40 views34 pages

HTML and CSS Basics Guide

frames web technology

Uploaded by

bijayabca080
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
40 views34 pages

HTML and CSS Basics Guide

frames web technology

Uploaded by

bijayabca080
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Unit 1: HTML and CSS

HTML Basic: HTML Tag Reference, Global Attributes, Document,


Structure Tags, Formatting Tags, Text Level Formatting, Block Level
Formatting, List Tags, hyperlink tags, Executable Content Tags.

1
Web page
• A web page is a document composed basically of text and
special codes called tags which make the display of the
WWW possible.
• Besides textual information, a web document may also
contain images, sound, animation, video and also links to
other pages anywhere on the web.
• A web site is a collection of web pages maintained by a
company, university, government or any individual.
• A home page or index page is a web page which opens first
while opening any web site.
• To create a web page, we need only a text editor and a 2
What is a Markup Language?
• Markup language is used to format text into a specified format. It uses
some predefined tags. These tags are not so flexible and hence
markup language possess certain restrictions to the web developers.
• A markup language is not a programming language because a
programming creates a set of instructions that are interpreted or
compiled into a program or application.
• The best example of a markup language is HTML and of a
programming language is php, java or .NET.

3
What is HTML?
• HTML stands for Hypertext Markup Language, and it is the standard used by the
world wide web documents.
• HTML is defined by the World Wide Web Consortium (W3C), an organization that
regulates standards for the Internet.
• An HTML file is an ASCII text file containing small markup tags. The markup tags
tell the Web browser how to display the page. Since HTML uses ASCII text, the
web documents are delivered over the network such that they are not platform
dependent. Hence only a web browser is required which can interpret HTML files
irrespective of whether it is running on a machine using Windows or UNIX or
Macintosh or on any other operating system or hardware platform.
• An HTML file must have an .htm or .html file extension.
• All html pages should contain four basic HTML elements:
• HTML
• HEAD
• TITLE
• BODY

4
How to create a web page?
1. Start Sublime Text or Notepad or Notepad++ (text editor) and type in the following text:
<html>
<head>
<title>Title of page</title>
</head>
<body>
<p>This is my first homepage. <b>This text is bold</b></p>
</body>
</html>
2. Save the file in your folder as "[Link]” or “[Link]”.
3. Right click and then click on "Open in Browser".
4. The browser will display the page.
Note: The browser caches your pages so it doesn’t have to read the same page twice. When
you have changed/modified a page, the browser doesn’t know that. Use the browser’s
refresh/reload button to force the browser to read the edited page.

5
HTML Tag Reference
Tag Description
<!--...--> Specifies a comment
<!DOCTYPE html> Specifies the document type
<a> Specifies an anchor
<abbr> Specifies an abbreviation
<acronym> Specifies an acronym
<address> Specifies an address element
<applet> Deprecated. Specifies an applet
<area> Specifies an area inside an image map
<article> Specifies an article HTML-5
<aside> Specifies some content loosely related to the page content. If it is removed, the remaining content still makes sense
HTML-5
<audio> Specifies a sound content HTML-5
<b> Specifies bold text
<base> Specifies a base URL for all the links in a page
<basefont> Deprecated. Specifies a base font
<bdo> Specifies the direction of text display
<bdi>Represents text that must be isolated from its surrounding for bidirectional text formatting. It allows embedding a span of
text with a different, or unknown, directionality HTML-5
<bgsound> Specifies background music 6
HTML Tag Reference cont…
<big> Specifies big text
<blink> Specifies a text which blinks
<blockquote> Specifies a long quotation
<body> Specifies the body element
<br> Inserts a single line break
<button> Specifies a push button
<canvas> For making graphics with a script HTML-5
<caption> Specifies a table caption
<center> Deprecated. Specifies centered text
<cite> Specifies a citation
<code> Specifies computer code text
<col> Specifies attributes for table columns
<colgroup> Specifies groups of table columns
<comment> Puts a comment in the document
<datalist> A list of options for input values HTML-5
<dd> Specifies a definition description
<del>Specifies deleted text
<dfn> Specifiesa definition term
<dialog> Specifiesa dialog box or window
7
HTML Tag Reference cont…
<dir> Deprecated. Specifies a directory list
<div> Specifies a section in a document
<dl> Specifies a definition list
<dt> Specifies a definition term
<em>Specifies emphasized text
<embed> Specifiesa container for an external (non-HTML) application HTML-5
<fieldset> Specifies a fieldset
<figcaption> Specifiesa caption for a <figure> element HTML-5
<figure> Specifies self-contained content HTML-5
<font> Deprecated. Specifies text font, size, and color
<footer> Specifies a footer for a document or section HTML-5
<form> Specifies a form
<frame> Specifies a sub window (a frame)
<frameset>Specifies a set of frames
<h1> to <h6> Specifies header 1 to header 6
<head> Specifies information about the document
<header> Specifies a header for a document or section HTML-5
<hr> Specifies a horizontal rule
8
HTML Tag Reference cont…
<html> Specifies an html document
<i> Specifies italic text
<iframe> Specifies an inline sub window (frame)
<ilayer> Specifies an inline layer
<img> Specifies an image
<input> Specifies an input field
<ins> Specifies inserted text
<isindex> Deprecated. Specifies a single-line input field
<kbd> Specifies keyboard text
<keygen> Generate key information in a form HTML-5
<label> Specifies a label for a form control
<layer> Specifies a layer
<legend> Specifies a title in a fieldset
<li> Specifies a list item
<link> Specifies a resource reference
<main> Specifies the main or important content in the document. There is only one element in the document HTML-5
<map> Specifies an image map
<mark> Specifies a text highlighted for reference purposes, that is for its relevance in another context HTML-5
<marquee>Creates a scrolling-text marquee
9
HTML Tag Reference cont…
<menu> Deprecated. Specifies a menu list
<menuitem> Specifies a command/menu item that the user can invoke from a popup menu HTML-5
<meta> Specifies meta data of an html document which is not displayed on the page
<meter> Specifies a scalar measurement within a known range (a gauge)
<multicol> Specifies a multicolumn text flow
<nav> Specifies a section that contains only navigation links HTML-5
<nobr> No breaks allowed in the enclosed text
<noembed> Specifies content to be presented by browsers that do not support the <embed>tag
<noframes> Specifies a noframe section
<noscript> Specifies a noscript section
<object> Specifies an embedded object
<ol> Specifies an ordered list
<optgroup> Specifies an option group
<option> Specifies an option in a drop-down list
<output> Specifies the result of a calculation HTML-5
<p> Specifies a paragraph
<param> Specifies a parameter for an object
<plaintext> Deprecated. Render the remainder of the document as preformatted plain text
<pre> Specifies preformatted text
10
HTML Tag Reference cont…
<progress> Specifies a completion progress of a task HTML-5
<q> Specifies a short quotation
<rp> Specifies to show browsers that do not support the ruby element HTML-5
<rt> Specifies an text ruby annotation HTML-5
<ruby> Specifies an ruby annotation HTML-5
<s> Deprecated. Specifies strikethrough text
<samp> Specifies sample computer code
<script> Specifies a script
<section> Specifies a section in a document HTML-5
<select> Specifies a selectable list
<spacer> Specifies a white space
<small> Specifies small text
<source> Specifies a media resources for media elements, defined inside video or audio elements HTML-5
<span> Specifies a section in a document
<strike> Deprecated. Specifies strikethrough text
<strong> Specifies strong text
<style> Specifies a style definition
<sub> Specifies subscripted text
<summary> Specifies a summary, caption, or legend for a given <details> HTML-5
11
<sup> Specifies superscripted text
HTML Tag Reference cont…
<table> Specifies a table
<tbody> Specifies a table body
<td> Specifies a table cell
<textarea> Specifies a text area
<tfoot> Specifies a table footer
<th> Specifies a table heading
<thead> Specifies a table header
<time> Specifies a date and time <details> HTML-5
<title> Specifies the document title
<tr> Specifies a table row
<track> Specifies a text tracks used in mediaplayers HTML-5
<tt> Specifies teletype text
<u> Deprecated. Specifies underlined text
<ul> Specifies an unordered list
<var> Specifies a variable
<video> Specifies a text tracks used in media players HTML-5
<wbr> Indicates a potential word break point within a <nobr> section
<xmp> Deprecated. Specifies preformatted text 12
HTML Global Attributes
Attribute Description
accesskey Specifies a shortcut key to activate/focus an element
class Specifies one or more classnames for an element (refers to a class in a style sheet)
contenteditable Specifies whether the content of an element is editable or not
data-* Used to store custom data private to the page or application
dir Specifies the text direction for the content in an element
draggable Specifies whether an element is draggable or not
hidden Specifies that an element is not yet, or is no longer, relevant
id Specifies a unique id for an element
lang Specifies the language of the element's content
spellcheck Specifies whether the element is to have its spelling and grammar checked or not
style Specifies an inline CSS style for an element
tabindex Specifies the tabbing order of an element
title Specifies extra information about an element
translate Specifies whether the content of an element should be translated or not

13
HTML Document
• An HTML document is a file containing Hypertext Markup Language, and its filename most
often ends in the .html extension. An HTML document is a text document read in by a
Web browser and then rendered on the screen.
• HTML code is based on tags, or hidden keywords, which provide instructions for
formatting the document.
• A tag starts with an angle bracket; the 'less than' sign: '<'. The tag ends with an angle
bracket; the 'greater than' sign '>’.
• Tags tell the processing program, often the web browser, what to do with the text. For
example, to make the word 'Hello' bold, you would use the opening bold tag <b> and then
the closing bold tag </b>, like this:
<b>Hello</b>
• HTML is defined by the World Wide Web Consortium (W3C), an organization that
regulates standards for the Internet. Each version of HTML has a set of definitions.
• Note that HTML is not a programming language. While we often refer to HTML markup as
HTML code, programming languages require the processing of logical statements and
math. HTML allows the developer to make text documents look engaging and pleasant. In
most cases, programming on an HTML document is done with JavaScript.

14
HTML Document example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

15
HTML Structure Tags
• HTML 5 includes a new set of semantic document structural tags to
define different parts or structure of a web page.

16
HTML Structure Tags cont..
• To implement such semantic mark up, HTML provides dedicated tags
that we can use to represent such sections, for example:
• header: <header>.
• navigation bar: <nav>.
• main content: <main>, with various content subsections represented by
<article>, <section>, and <div> elements.
• sidebar: <aside>; often placed inside <main>.
• footer: <footer>.
• For example, please view file named “HTML Structure Tags
[Link]” in class note folder.

17
HTML Formatting Tags
• 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

18
HTML Attributes
• An attribute is used to define the characteristics of an HTML element and is placed
inside the element's opening tag.
• Attributes provide additional information about elements.
• Attributes are always specified in the start tag. <div style=“color: red;”>
• All attributes are made up of two parts − a name and a value (name="value"):
• The name is the property you want to set. For example, the paragraph <p> element in the
example carries an attribute whose name is align, which you can use to indicate the
alignment of paragraph on the page.
• The value is what you want the value of the property to be set and always put within
quotations. The below example shows three possible values of align attribute: left, center
and right.
• Example (here Name is align and value is left, center, right)
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
• Attribute names and attribute values are case-insensitive. However, the World
Wide Web Consortium (W3C) recommends lowercase attributes/attribute values
in their HTML 4 recommendation.
19
HTML Attributes types
• Core Attributes
• The four core/general purpose attributes that can be used on most HTML
elements are:
• Id e.g.: <p id = "html">This para explains what is HTML</p>
• Title e.g.: <p title="I'm a tooltip">This is a paragraph.</p>
• Class e.g.: <p class="highlight">This is a paragraph.</p>
• Style e.g.: <p style="color: blue;">This is a paragraph.</p>
• Internationalization Attributes
• Dir e.g: <html dir = "rtl">
• ltr = direction of text flow from left to right is default
• rtl = direction of text flow from right to left ( used for Hebrew or Arabic language that are
read from right to left )
• Lang e.g: <html lang = "en">
• xml:lang eg:<html xmlns="[Link] lang="en" xml:lang="en">
• In EXtensible HyperText Markup Language (XHTML), the language is declared inside the <html>
• XHTML was developed by World Wide Web Consortium (W3C) to help web developers make the transition
from HTML to XML
20
HTML Attributes types cont…
• Generic Attributes
Attribute Options Function
align right, left, center Horizontally aligns tags
valign top, middle, bottom Vertically aligns tags within an HTML element.
bgcolor numeric, hexidecimal, RGB values Places a background color behind an element

background URL Places a background image behind an element

id User Defined Names an element for use with Cascading Style


Sheets.
class User Defined Classifies an element for use with Cascading Style
Sheets.
width Numeric Value Specifies the width of tables, images, or table cells.

height Numeric Value Specifies the height of tables, images, or table cells.

title User Defined "Pop-up" title of the elements.


21
Please visit [Link] for details on html attributes.
Block-level and Inline elements
• Block-level elements
• A block-level element always starts on a new line.
• A block-level element always takes up the full width available (stretches out to the left and right as
far as it can).
• A block level element has a top and a bottom margin, whereas an inline element does not.
• Here are the block-level elements in HTML:
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt><fieldset>
<figcaption> <figure> <footer> <form> <h1>-<h6> <header><hr><li> <main> <nav>
<noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
• Example: <div>Hello World</div>
• Inline elements
• An inline element does not start on a new line.
• An inline element only takes up as much width as necessary.
• Here are the inline elements in HTML:
<a> <abbr> <acronym> <b> <bdo> <big> <br><button> <cite> <code> <dfn>
<em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp>
<script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
• Example: <span>Hello World</span>

22
List Tags
• HTML lists allow web developers to group a set of related items in lists.
• Three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain:
• <ul> − An unordered list. This will list items using plain bullets.
• <ol> − An ordered list. This will use different schemes of numbers to list your items.
• <dl> − A description list. This arranges your items in the same way as they are arranged in a dictionary.
• Unordered 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:
• Example:
<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
• Example:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

23
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:
• Example:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
• HTML List Tags
Tag Description
<ul>Defines an unordered list
<ol>Defines an ordered list
<li> Defines a list item
<dl>Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
24
Lists Attribute
Attribute:
Attribute Value Description
value number Only for <ol> lists. Specifies the start value of a list item.
The following list items will increment from that number
type Square, disc, for <ul> tag to specify the type of bullet you like. By
Example: circle default, it is a disc.
1, I, i, A, a Resp. for <ol> tag By default 1; Case Numerals,
Upper-Case Numerals, Lower-Case Numerals,
Upper-Case Letters, Lower-Case Letters
<ol>
<li value="100">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>
25
Executable Content Tags
• One of the most useful web technologies is the ability to deliver
applications directly to the browser.
• These typically small programs perform simple tasks on the client
computer, from responding to user mouse or keyboard actions to spicing
up your web page displays with multimedia-enabling software.
• We can embed scripts in our documents using a language known as
JavaScript. Or we can load and execute small, Java-based,
platform-independent applications known as applets.
• During execution, these programs may generate dynamic content,
interact with the user, validate form data, or even create windows and
run entire applications independent of our pages.

26
Executable Content Tags cont..
• JavaScript
• It is a scripting language that taps the native functionality of the browser.
• The JavaScript-enabled browsers, interpret and act upon the JavaScript statements you provide to do
such things as alter the appearance of the document, control the display, validate and manipulate form
elements, and perform general computational tasks.
• <script> Tag
• JavaScript code in our document is via the HTML and XHTML standard <script> tag at head or at the end
of body section.
• Example (internal JS)
<script language="JavaScript">
<!--
JavaScript statements go here
// -->
</script>
• Attributes:
charset, defer, language, src, type
• Example (External JS)
<head>
<script language="JavaScript" src="[Link]
<!-- JavaScript statements go written in a separate file [Link]// -->
</script>
</head>
27
Executable Content Tags cont…
• Applets:
• An applet is a Java program that can be embedded into a web page. It runs inside
the web browser and works at client side.
• An applet is embedded in an HTML page using the APPLET <applet>or OBJECT
<object>tag and hosted on a web server.
• Applets are used to make the web site more dynamic and entertaining.
• Life cycle of an applet:
• It is important to understand the order in which the various
methods shown in the above image are called. When an applet
begins, the following methods are called, in this sequence:
1. init( ) method is where you should initialize variables
2. start( ) method is called each time an applet’s HTML document is
displayed onscreen.
3. paint( ) method is called when the applet begins execution.
• When an applet is terminated, the following sequence of
method calls takes place:
1. stop( ) method is called when a web browser leaves the HTML
document containing the applet—when it goes to another page
2. destroy( ) method is called when the environment determines that
your applet needs to be removed completely from memory. 28
Executable Content Tags cont…
• Features of Applets over HTML
• Displaying dynamic web pages of a web application.
• Playing sound files.
• Displaying documents
• Playing animations
• Restrictions imposed on Java applets
• An applet cannot load libraries or define native methods.
• An applet cannot ordinarily read or write files on the execution host.
• An applet cannot read certain system properties.
• An applet cannot make network connections except to the host that it came
from.
• An applet cannot start any program on the host that’s executing it.
• Not Supported in HTML5
29
Executable Content Tags cont…
• The <applet> tag was used in HTML 4 to define an embedded applet (Plug-in).
• Plug-ins
• Plug-ins are a computer programs that extend the standard functionality of the browser.
• Plug-ins have been used for many different purposes:
• Run Java applets
• Run ActiveX controls
• Display Flash movies
• Display maps
• Scan for viruses
• Verify a bank id
• Most browsers no longer support Java Applets and Plug-ins.
• ActiveX controls are no longer supported in any browsers.
• The support for Shockwave Flash has also been turned off in modern browsers.
• Instead, we used to embed a video, use the <video> tag
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
30
Executable Content Tags cont…
• to embed audio, use the <audio> tag:
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

31
hyperlink tags
• HTML Links, also known as hyperlinks, are defined by the <a> tag in HTML,
which stands for “anchor.”
• These links are essential for navigating between web pages and directing users
to different sites, documents, or sections within the same page.
• The basic attributes of the <a> tag include href, title, and target, among others.
• It has an element that may be clicked, such as a symbol, text, phrase, or
picture.
• Basic Syntax of an HTML Link:
<a href="[Link] Example</a>
• By default, links will appear as follows in all browsers (color may vary in various
browsers):
• An unvisited link is underlined and blue.
• A visited link is underlined and purple.
• An active link is underlined and red.
32
hyperlink tags (cont…)
• HTML Links – Target Attribute
• The target attribute in the <a> tag specifies where to open the linked document.
It controls whether the link opens in the same window, a new window, or a
specific frame.
Attribute Description
_blank Opens the linked document in a new window or tab.

Opens the linked document in the same frame or window as the


_self
link. (Default behavior)

_parent Opens the linked document in the parent frame.

_top Opens the linked document in the full body of the window.

Opens the linked document in a specified frame. The frame’s


framename
name is specified in the attribute.
33
hyperlink tags (cont…)
• Linking Different HTML Elements
• Below are examples of how to link different HTML elements with their respective
code snippets

Element to Interlink Specific Code


<a href=“[Link] src="[Link]"
Linking to an image
alt="Image"></a>

Link to an Email
<a href="[Link] Email</a>
Address

Phone Number <a href="[Link] Now</a>

<a href="[Link] <button>Visit Example</button>


Button
</a>

Link to Download File <a href="[Link]" download>Download File</a>


34
<a href="[Link] title="Visit Example">Link

You might also like