Scribd
Upload
2 views

Detailed_HTML_Tags_Lab_Manual

Uploaded by

claytmpalonp
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Detailed_HTML_Tags_Lab_Manual

Uploaded by

claytmpalonp
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 60

Web Development Lab

Tags lab manual


<!DOCTYPE html>
Description: Defines the document type and HTML version. The <!DOCTYPE>
declaration helps the browser understand that this is an HTML5 document, which
impacts how the browser interprets the page.

Page 1 of 60
<html>

Description: The root element of an HTML document. All content within the HTML
page is nested inside the <html> tag. This tag is essential as it defines the start and end of
the HTML document.

<head>
Description: Contains meta-information and links for stylesheets, scripts, and document
properties. The <head> tag includes information that doesn’t appear directly on the page
but helps with page functionality and metadata.

Page 2 of 60
<body>
Description: Defines the main content area of the HTML document, containing all the
visible elements such as headings, paragraphs, images, and more. Everything within
<body> is displayed on the webpage.

<h1> to <h6>
Description: Defines HTML headings, where <h1> represents the most important
heading and <h6> the least. Headings help structure content and are used by search
engines to understand the content hierarchy.

Page 3 of 60
PARAGRAPH

<p>
Description: Defines a paragraph of text. The <p> tag is a block-level element and
typically contains a single unit of text. Each paragraph has automatic space around it to
visually separate content.

Page 4 of 60
<a>
Description: Defines a hyperlink, which is used to link from one page to another or
within the same page. The href attribute specifies the URL of the link destination.

<b>
Description: Displays text in bold. This tag does not imply importance or emphasis, just
a visual styling of bold text.

Page 5 of 60
<img>
Description: Embeds an image into the document. The src attribute specifies the image
source URL, and the alt attribute provides alternative text if the image cannot be
displayed.

<i>
Description: Displays text in italics. This tag is typically used to indicate text that should
be visually different from normal text, like foreign words or technical terms.

Page 6 of 60
<strong>
Description: Defines strong importance, usually displayed as bold text. This tag also
indicates that the content has greater importance or urgency.

<em>, <mark>, <br>


Description: <mark> Highlights text, usually displayed with a yellow background.
This tag is useful for marking or highlighting important text.

Page 7 of 60
Description: <br> Inserts a line break. This tag is useful for breaking up text content
without starting a new paragraph.

<small>
Description: Displays text in a smaller font size compared to surrounding text. This tag
is often used for fine print or disclaimer text

Page 8 of 60
<del>
Description: Defines deleted text, often shown with a strikethrough. This tag is useful
for indicating text that has been removed.

<ins>
Description: Defines inserted text, usually underlined. This tag is useful for indicating
text that has been added

Page 9 of 60
<sub>

Description: Displays subscript text, typically used for chemical formulas or


mathematical notation.

<sup>
Description: Displays superscript text, often used for exponents or ordinal numbers.

Page 10 of 60
<hr>
Description: Inserts a horizontal rule (line) to separate content. This tag is used to
visually divide sections within a page

<ul>
Description: Defines an unordered list, which is a bulleted list. Each item in the list is
defined using <li>.

Page 11 of 60
<ol>
Description: Defines an ordered list, which is a numbered list. Each item in the list is
defined using <li>.

<table>
Description: Defines a table, used for displaying tabular data. A table consists of rows
(<tr>) and cells (<td> or <th>).

Page 12 of 60
<th>
Description: Defines a header cell within a table row. Header cells are typically bold and
centered.

Page 13 of 60
<form>
Description: Defines an HTML form, used to collect user input. Forms can include
various input types like text fields, checkboxes, and buttons.

<input>
Description: Defines an input field within a form. The type attribute specifies the type of
input, such as text, password, radio, etc.

Page 14 of 60
<button>
Description: Defines a clickable button. Buttons can be used to submit forms or trigger
JavaScript actions.

<abbr>
Description: Defines an abbreviation or acronym, with a title attribute to specify the full
term.

<address>
Description: Provides contact information, often displayed in italic. Typically used for
author or company information.

Page 15 of 60
<q>
Description: Defines a short inline quotation, often enclosed in quotation marks by
default.

Page 16 of 60
<pre>
Description: Displays preformatted text in a fixed-width font. It preserves spaces and
line breaks.

<!-- Comment -->


Description: Defines a comment that will not be displayed in the browser. Comments are
helpful for explaining code

Page 17 of 60
<div>
Description: Defines a division or section in an HTML document. Often used to group
block elements and apply styles.

<caption
Description: Provides a caption for a <table>, typically displayed above the table.

Page 18 of 60
<colgroup> and <col>
Description: Defines a group of columns within a table for styling. The <col> tag
specifies column properties.

<style>
INTERNAL CSS
Description: Embeds CSS styles within an HTML document. The <style> tag is placed
inside the <head> element.

Page 19 of 60
INLINE CSS
Description: Inline CSS is applied directly to individual elements using the style
attribute.

Page 20 of 60
EXTERNAL CSS
Description: External CSS is defined in a separate file and linked to the HTML file using
a <link> tag.

<fieldset> and <legend>


Description: Groups related elements within a form. The <legend> tag provides a
caption for the <fieldset>.

Page 21 of 60
<iframe>
Description: Embeds an external webpage or content within a frame in the document.

Page 22 of 60
<button type="button">
Description: Creates a clickable button that can trigger JavaScript functions. The type
attribute can specify different button types.

Class Attribute
Description: Specifies one or more class names for an HTML element, which can be
styled using CSS. Multiple HTML elements can share the same class.

Page 23 of 60
ID Attribute
Description: Specifies a unique identifier for an HTML element. The id is used for CSS
styling or JavaScript manipulation.

<form> and <input>


Description: <form> creates an HTML form for collecting user input. The <input>
element within it accepts various types of input.

Page 24 of 60
<textarea>
Description: Defines a multi-line text input field.

Syntax: <input type="type">

Page 25 of 60
<select> and <option>
Description: Creates a dropdown menu with <select>, where each choice is defined by
<option>.

autocomplete Attribute in <form>


Description: Enables or disables form field autocomplete.

Page 26 of 60
readonly, disabled, maxlength, and required Attributes in <input>
Description:

 readonly: Makes the input field non-editable.


 disabled: Disables the input field.
 maxlength: Sets the maximum number of characters allowed.
 required: Ensures the field must be filled before form submission.

Page 27 of 60
Using JavaScript with HTML
Internal JavaScript:
Description: JavaScript can be embedded directly within HTML using <script> tags or
included externally for better maintainability.

Variables in JavaScript
Description: JavaScript variables are containers for storing data. They can be declared
using var, let, or const depending on the scope and immutability requirements.

Page 28 of 60
Data Types
Description: JavaScript supports various data types such as numbers, strings, booleans,
objects, and arrays.

Page 29 of 60
If-Else Statements
Description: Conditional statements are used to perform different actions based on
different conditions.

Loops in JavaScript
Description: Loops like for, while, and do-while are used for executing a block of code
repeatedly.

Page 30 of 60
Functions
Description: Functions are blocks of code designed to perform a specific task. They can
accept parameters and return values.

Page 31 of 60
Arrays
Description: Arrays are used to store multiple values in a single variable, accessed using
indexes.

Operators and Types of Operators


Description: JavaScript operators are used to perform operations on variables and values.
They include arithmetic, assignment, comparison, and logical operators.

Page 32 of 60
Switch Statement
Description: The switch statement evaluates an expression and matches its value against
multiple cases, executing the associated block of code.

Page 33 of 60
Global and Local Variables
Description: Global variables are accessible throughout the script, while local variables
are only accessible within the function they are declared in.

Page 34 of 60
Scope and Lifetime of Variables
Description: Variable scope determines where a variable can be accessed, and its
lifetime determines how long the variable exists in memory.

Page 35 of 60
While Loop
Description: The while loop executes a block of code if the specified condition evaluates
to true.

Page 36 of 60
Do-While Loop
Description: The do-while loop executes the code block once, then repeats the loop as
long as the specified condition evaluates to true.

Multidimensional Array
Description: Multidimensional arrays are arrays containing other arrays. They are useful
for storing complex data structures like tables.

Page 37 of 60
Array Methods (forEach)
Description: The forEach method executes a provided function once for each array
element.

Page 38 of 60
Using PHP with HTML
Basic PHP Syntax, Echo Statement
Description: This is the basic syntax to write PHP code. PHP code must be enclosed
within <?php and ?> tags. All PHP files should be saved with the .php extension.

Description: The echo statement outputs strings, variables, or HTML content. It is


commonly used to display information on a webpage.

Concatenation with Dot Operator


Description: The . operator concatenates strings in PHP, while the comma can also
display multiple values without concatenation.

Page 39 of 60
HTML in Echo Statements
Description: HTML tags can be embedded inside PHP echo statements to style the
output. Always enclose the HTML in quotes.

Displaying Integers
Description: You can directly output integers using echo without quotes.

Page 40 of 60
PHP Variables
Description: Variables in PHP are declared with a $ sign. They store and display values
using echo.

var_dump() Function, Comments


Description: The var_dump() function displays the data type and value of a variable. It is
useful for debugging.

Description: PHP supports single-line (// or #) and multi-line comments (/* */) for
explaining code or disabling parts of it.

Page 41 of 60
Constants
Description: Constants are declared using the define() function. Unlike variables,
constants cannot change once set and do not use the $ sign.

Arithmetic Operations
Description: PHP supports arithmetic operations like addition (+) and increment (++) for
manipulating numeric values.

Page 42 of 60
Assignment Operations
Description: The == operator checks equality between two variables. It returns 1 if true
and prints nothing if false.

if Condition, Range Check with if, Negation with if


Description: The if condition checks if a statement is true and executes the
corresponding block of code.

Description: The if statement checks if the value of $age falls between 10 and 20 using
the and operator.

Description: The ! (negation) operator reverses the condition. If $age is not equal to 10,
the code block executes.

Page 43 of 60
If-Else Condition
Description: The if-else statement executes one block of code if a condition is true, and
another block if it is false.

Page 44 of 60
Switch Statement
Description: A switch statement is an alternative to multiple if-else conditions. It
matches a value against multiple cases and executes the corresponding code.

Assignment 1

Task 1
Write a html, CSS code to make a flight schedule.

Page 45 of 60
Page 46 of 60
Page 47 of 60
TASK 2
Make a tourist website engaging and showing tourism spots using html and CSS.

Page 48 of 60
Page 49 of 60
Assignment 2

Task 1

Write html and CSS code to make an image slider.

Page 50 of 60
Page 51 of 60
Task 2

Make an image gallery using html and CSS.

Page 52 of 60
Page 53 of 60
Lab Task
Home Page
Making a website of gourmet deluxe using HTML and CSS.

Page 54 of 60
Menu page

Page 55 of 60
Page 56 of 60
Reservation page

Page 57 of 60
About US

Page 58 of 60
Contact us

Page 59 of 60
Page 60 of 60

You might also like