This document provides information about HTML elements and tags. It defines HTML as the standard markup language for creating web pages and consists of elements that tell browsers how to display content. Some key elements discussed include headings, paragraphs, links, images, line breaks, and preformatted text. The document also covers HTML tags for text formatting, quotes, abbreviations, and contact information.
Episode 14 - Basics of HTML for SalesforceJitendra Zaa
This document provides an agenda and overview for an introduction to HTML coding basics. It includes 3 sentences:
The document outlines an agenda to cover introduction to HTML tags, text formatting, headings, paragraphs, comments, images, links, lists, forms, tables, cascading style sheets (CSS), and various CSS properties. It provides examples of common HTML elements and tags as well as how to structure an HTML page and insert different types of content. The session will conclude with allowing time for questions and answers.
This document provides an introduction to HTML (Hypertext Markup Language), which is the standard markup language used to create web pages. It explains that HTML is not a programming language but a markup language that uses tags to describe and structure the content of web pages. The document then demonstrates basic HTML tags and elements like headings, paragraphs, line breaks, and horizontal rules through examples and provides information on other tags for text formatting, alignment, special characters and more.
The document provides an introduction to HTML by describing its key components and purposes. It explains that HTML is the standard markup language used to define the structure of web pages. HTML uses elements to describe headings, paragraphs, and other content. Elements tell browsers how to display text and other media. The document also gives a simple example of an HTML file structure.
HTML (Hypertext Markup Language) is used to create web pages and is the building block of the World Wide Web. It uses tags to define headings, paragraphs, lists, links, and other elements including images, tables, forms, and media. Some key HTML tags include <html> <head> <title> <body> <h1>-<h6> <p> <a> <img> <ul> <ol> <li> <table> <tr> <td>. HTML documents must have an <html> tag which contains <head> and <body> tags where content is placed.
Introduction to HTML Communication SkillsGraceChokoli1
HTML is a markup language used to structure and present content on the web. It uses tags like <p> and <h1> to divide text into paragraphs and headings. The <body> tag is used to define the main content area and attributes can be used to set properties like background color. Common tags include <p> for paragraphs, <h1>-<h6> for six levels of headings, and <font> for changing text properties.
HTML is a markup language that defines the structure and layout of a web page. It uses tags to mark elements like headings, paragraphs, lists, links and images. Dynamic HTML (DHTML) enhances HTML by making web pages more interactive using technologies like CSS, JavaScript and DOM. DHTML allows animating text and images, adding effects like drop-down menus and rollover buttons, and creating browser-based games. It allows dynamically updating web page styles and content in real-time.
The document provides an overview of basic HTML theory, including:
- What the World Wide Web is and how it works
- How browsers fetch and display web pages using HTML tags
- Common HTML tags for formatting text, creating lists, links, images and tables
- Additional HTML concepts like attributes, entities, and frames
To make a picture the background of web pages:
1. Point the <body> background attribute to the image file name using <body background="picture.gif">.
2. Add the bgproperties attribute with a value of "fixed" to keep the background image from moving when scrolling: <body background="picture.gif" bgproperties="fixed">.
3. Place the <body> tag with the background attributes after the closing </head> tag to set the background image for the entire page.
HTML (Hypertext Markup Language) is the standard markup language used to create web pages. Key points covered in the document include:
- HTML consists of elements that describe the structure of a web page like headings, paragraphs, links, images, etc.
- HTML documents require an opening <html> tag and closing </html> tag with the visible content between <body> and </body> tags.
- Common elements include headings <h1>-<h6>, paragraphs <p>, links <a>, images <img>, lists <ul>, <ol>, <li>, tables <table>, <tr>, <td>, <th>, and more.
- Attributes provide additional information about elements like
This document provides an introduction and overview of HTML. It begins by explaining the differences between static and dynamic web pages. It then discusses the different layers of web design including structure, style, and behavior. The document goes on to define HTML and cover its objectives, advantages, and disadvantages. It provides examples of key HTML tags and elements for text formatting, lists, images, and tables.
- HTML (Hypertext Markup Language) is the standard markup language used to create web pages
- HTML describes the structure of a web page using elements like headings, paragraphs, links, and images
- Key HTML elements include headings (<h1>-<h6>), paragraphs (<p>), links (<a>), images (<img>), and breaks (<br>)
HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It uses tags to define paragraphs, headings, lists, links and other elements. The basic structure of an HTML document includes the <html>, <head> and <body> tags. Common elements include headings, paragraphs, links, images, lists and tables. CSS (Cascading Style Sheets) is used to style and lay out HTML elements.
The document provides information about HTML (Hypertext Markup Language) elements and tags used to structure and format web pages. It defines key concepts like the difference between the Internet and World Wide Web. It explains what web pages, websites, and how they are designed. It also provides details on important HTML tags like headings, paragraphs, links, images and how to format text. Design concepts like content, usability, and visibility that make websites effective are also summarized.
The document discusses HTML (Hypertext Markup Language) and how to format text and add images in HTML. It covers:
1. The basics of HTML including what it is, its structure with <html>, <head>, and <body> tags, and common elements like headings, paragraphs, line breaks, and horizontal rules.
2. How to format text using styles, colors, sizes, and other properties.
3. How to add images with the <img> tag specifying the image's src and alt attributes, and setting its size.
4. Ensuring images are in the same folder as the HTML file or specifying the path if elsewhere.
A web server hosts one or more websites and web pages. A website is a collection of web pages, and a web page is a single file viewable in a browser. The home page is the first page visited in a website.
The document provides an introduction to HTML by describing its key components and purposes. It explains that HTML is the standard markup language used to define the structure of web pages. HTML uses elements to describe headings, paragraphs, and other content. Elements tell browsers how to display text and other media. The document also gives a simple example of an HTML file structure.
HTML (Hypertext Markup Language) is used to create web pages and is the building block of the World Wide Web. It uses tags to define headings, paragraphs, lists, links, and other elements including images, tables, forms, and media. Some key HTML tags include <html> <head> <title> <body> <h1>-<h6> <p> <a> <img> <ul> <ol> <li> <table> <tr> <td>. HTML documents must have an <html> tag which contains <head> and <body> tags where content is placed.
Introduction to HTML Communication SkillsGraceChokoli1
HTML is a markup language used to structure and present content on the web. It uses tags like <p> and <h1> to divide text into paragraphs and headings. The <body> tag is used to define the main content area and attributes can be used to set properties like background color. Common tags include <p> for paragraphs, <h1>-<h6> for six levels of headings, and <font> for changing text properties.
HTML is a markup language that defines the structure and layout of a web page. It uses tags to mark elements like headings, paragraphs, lists, links and images. Dynamic HTML (DHTML) enhances HTML by making web pages more interactive using technologies like CSS, JavaScript and DOM. DHTML allows animating text and images, adding effects like drop-down menus and rollover buttons, and creating browser-based games. It allows dynamically updating web page styles and content in real-time.
The document provides an overview of basic HTML theory, including:
- What the World Wide Web is and how it works
- How browsers fetch and display web pages using HTML tags
- Common HTML tags for formatting text, creating lists, links, images and tables
- Additional HTML concepts like attributes, entities, and frames
To make a picture the background of web pages:
1. Point the <body> background attribute to the image file name using <body background="picture.gif">.
2. Add the bgproperties attribute with a value of "fixed" to keep the background image from moving when scrolling: <body background="picture.gif" bgproperties="fixed">.
3. Place the <body> tag with the background attributes after the closing </head> tag to set the background image for the entire page.
HTML (Hypertext Markup Language) is the standard markup language used to create web pages. Key points covered in the document include:
- HTML consists of elements that describe the structure of a web page like headings, paragraphs, links, images, etc.
- HTML documents require an opening <html> tag and closing </html> tag with the visible content between <body> and </body> tags.
- Common elements include headings <h1>-<h6>, paragraphs <p>, links <a>, images <img>, lists <ul>, <ol>, <li>, tables <table>, <tr>, <td>, <th>, and more.
- Attributes provide additional information about elements like
This document provides an introduction and overview of HTML. It begins by explaining the differences between static and dynamic web pages. It then discusses the different layers of web design including structure, style, and behavior. The document goes on to define HTML and cover its objectives, advantages, and disadvantages. It provides examples of key HTML tags and elements for text formatting, lists, images, and tables.
- HTML (Hypertext Markup Language) is the standard markup language used to create web pages
- HTML describes the structure of a web page using elements like headings, paragraphs, links, and images
- Key HTML elements include headings (<h1>-<h6>), paragraphs (<p>), links (<a>), images (<img>), and breaks (<br>)
HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It uses tags to define paragraphs, headings, lists, links and other elements. The basic structure of an HTML document includes the <html>, <head> and <body> tags. Common elements include headings, paragraphs, links, images, lists and tables. CSS (Cascading Style Sheets) is used to style and lay out HTML elements.
The document provides information about HTML (Hypertext Markup Language) elements and tags used to structure and format web pages. It defines key concepts like the difference between the Internet and World Wide Web. It explains what web pages, websites, and how they are designed. It also provides details on important HTML tags like headings, paragraphs, links, images and how to format text. Design concepts like content, usability, and visibility that make websites effective are also summarized.
The document discusses HTML (Hypertext Markup Language) and how to format text and add images in HTML. It covers:
1. The basics of HTML including what it is, its structure with <html>, <head>, and <body> tags, and common elements like headings, paragraphs, line breaks, and horizontal rules.
2. How to format text using styles, colors, sizes, and other properties.
3. How to add images with the <img> tag specifying the image's src and alt attributes, and setting its size.
4. Ensuring images are in the same folder as the HTML file or specifying the path if elsewhere.
A web server hosts one or more websites and web pages. A website is a collection of web pages, and a web page is a single file viewable in a browser. The home page is the first page visited in a website.
Third Review PPT that consists of the project d etails like abstract.Sowndarya6
CyberShieldX is an AI-driven cybersecurity SaaS web application designed to provide automated security analysis and proactive threat mitigation for business websites. As cyber threats continue to evolve, traditional security tools like OpenVAS and Nessus require manual configurations and lack real-time automation. CyberShieldX addresses these limitations by integrating AI-powered vulnerability assessment, intrusion detection, and security maintenance services. Users can analyze their websites by simply submitting a URL, after which CyberShieldX conducts an in-depth vulnerability scan using advanced security tools such as OpenVAS, Nessus, and Metasploit. The system then generates a detailed report highlighting security risks, potential exploits, and recommended fixes. Premium users receive continuous security monitoring, automatic patching, and expert assistance to fortify their digital infrastructure against emerging threats. Built on a robust cloud infrastructure using AWS, Docker, and Kubernetes, CyberShieldX ensures scalability, high availability, and efficient security enforcement. Its AI-driven approach enhances detection accuracy, minimizes false positives, and provides real-time security insights. This project will cover the system's architecture, implementation, and its advantages over existing security solutions, demonstrating how CyberShieldX revolutionizes cybersecurity by offering businesses a smarter, automated, and proactive defense mechanism against ever-evolving cyber threats.
Top Cite Articles- International Journal on Soft Computing, Artificial Intell...ijscai
International Journal on Soft Computing, Artificial Intelligence and Applications (IJSCAI) is an open access peer-reviewed journal that provides an excellent international forum for sharing knowledge and results in theory, methodology and applications of Artificial Intelligence, Soft Computing. The Journal looks for significant contributions to all major fields of the Artificial Intelligence, Soft Computing in theoretical and practical aspects. The aim of the Journal is to provide a platform to the researchers and practitioners from both academia as well as industry to meet and share cutting-edge development in the field.
This presentation highlights project development using software development life cycle (SDLC) with a major focus on incorporating research in the design phase to develop innovative solution. Some case-studies are also highlighted which makes the reader to understand the different phases with practical examples.
本資料「To CoT or not to CoT?」では、大規模言語モデルにおけるChain of Thought(CoT)プロンプトの効果について詳しく解説しています。
CoTはあらゆるタスクに効く万能な手法ではなく、特に数学的・論理的・アルゴリズム的な推論を伴う課題で高い効果を発揮することが実験から示されています。
一方で、常識や一般知識を問う問題に対しては効果が限定的であることも明らかになりました。
複雑な問題を段階的に分解・実行する「計画と実行」のプロセスにおいて、CoTの強みが活かされる点も注目ポイントです。
This presentation explores when Chain of Thought (CoT) prompting is truly effective in large language models.
The findings show that CoT significantly improves performance on tasks involving mathematical or logical reasoning, while its impact is limited on general knowledge or commonsense tasks.
PREDICTION OF ROOM TEMPERATURE SIDEEFFECT DUE TOFAST DEMAND RESPONSEFOR BUILD...ijccmsjournal
In order to evaluate side-effect of power limitation due to the Fast Automated Demand Response
(FastADR) for building air-conditioning facilities, a prediction model on short time change of average
room temperature has been developed. A room temperature indexis defined as a weighted average of the
entire building for room temperature deviations from the setpoints. The index is assumed to be used to
divide total FastADRrequest to distribute power limitation commands to each building.In order to predict
five-minute-change of the index, our combined mathematical model of an auto regression (AR) and a
neural network (NN) is proposed.In the experimental results, the combined model showedthe root mean
square error (RMSE) of 0.23 degrees, in comparison with 0.37 and 0.26 for conventional single NN and AR
models, respectively. This result is satisfactory prediction for required comfort of approximately 1 degree
Celsius allowance.
This document provides information about the Fifth edition of the magazine "Sthapatya" published by the Association of Civil Engineers (Practicing) Aurangabad. It includes messages from current and past presidents of ACEP, memories and photos from past ACEP events, information on life time achievement awards given by ACEP, and a technical article on concrete maintenance, repairs and strengthening. The document highlights activities of ACEP and provides a technical educational article for members.
This research presents a machine learning (ML) based model to estimate the axial strength of corroded RC columns reinforced with fiber-reinforced polymer (FRP) composites. Estimating the axial strength of corroded columns is complex due to the intricate interplay between corrosion and FRP reinforcement. To address this, a dataset of 102 samples from various literature sources was compiled. Subsequently, this dataset was employed to create and train the ML models. The parameters influencing axial strength included the geometry of the column, properties of the FRP material, degree of corrosion, and properties of the concrete. Considering the scarcity of reliable design guidelines for estimating the axial strength of RC columns considering corrosion effects, artificial neural network (ANN), Gaussian process regression (GPR), and support vector machine (SVM) techniques were employed. These techniques were used to predict the axial strength of corroded RC columns reinforced with FRP. When comparing the results of the proposed ML models with existing design guidelines, the ANN model demonstrated higher predictive accuracy. The ANN model achieved an R-value of 98.08% and an RMSE value of 132.69 kN which is the lowest among all other models. This model fills the existing gap in knowledge and provides a precise means of assessment. This model can be used in the scientific community by researchers and practitioners to predict the axial strength of FRP-strengthened corroded columns. In addition, the GPR and SVM models obtained an accuracy of 98.26% and 97.99%, respectively.
This study will provide the audience with an understanding of the capabilities of soft tools such as Artificial Neural Networks (ANN), Support Vector Regression (SVR), Model Trees (MT), and Multi-Gene Genetic Programming (MGGP) as a statistical downscaling tool. Many projects are underway around the world to downscale the data from Global Climate Models (GCM). The majority of the statistical tools have a lengthy downscaling pipeline to follow. To improve its accuracy, the GCM data is re-gridded according to the grid points of the observed data, standardized, and, sometimes, bias-removal is required. The current work suggests that future precipitation can be predicted by using precipitation data from the nearest four grid points as input to soft tools and observed precipitation as output. This research aims to estimate precipitation trends in the near future (2021-2050), using 5 GCMs, for Pune, in the state of Maharashtra, India. The findings indicate that each one of the soft tools can model the precipitation with excellent accuracy as compared to the traditional method of Distribution Based Scaling (DBS). The results show that ANN models appear to give the best results, followed by MT, then MGGP, and finally SVR. This work is one of a kind in that it provides insights into the changing monsoon season in Pune. The anticipated average precipitation levels depict a rise of 300–500% in January, along with increases of 200-300% in February and March, and a 100-150% increase for April and December. In contrast, rainfall appears to be decreasing by 20-30% between June and September.
The development of smart cities holds immense significance in shaping a nation's urban fabric and effectively addressing urban challenges that profoundly impact the economy. Among these challenges, road accidents pose a significant obstacle to urban progress, affecting lives, supply chain efficiency, and socioeconomic well-being. To address this issue effectively, accurate forecasting of road accidents is crucial for policy formulation and enhancing safety measures. Time series forecasting of road accidents provides invaluable insights for devising strategies, enabling swift actions in the short term to reduce accident rates, and informing well-informed road design and safety management policies for the long term, including the implementation of flyovers, and the enhancement of road quality to withstand all weather conditions. Deep Learning's exceptional pattern recognition capabilities have made it a favored approach for accident forecasting. The study comprehensively evaluates deep learning models, such as RNN, LSTM, CNN+LSTM, GRU, Transformer, and MLP, using a ten-year dataset from the esteemed Smart Road Accident Database in Hubballi-Dharwad. The findings unequivocally underscore LSTM's superiority, exhibiting lower errors in both yearly (RMSE: 0.291, MAE: 0.271, MAPE: 6.674%) and monthly (RMSE: 0.186, MAE: 0.176, MAPE: 5.850%) variations. Based on these compelling findings, the study provides strategic recommendations to urban development authorities, emphasizing comprehensive policy frameworks encompassing short-term and long-term measures to reduce accident rates alongside meticulous safety measures and infrastructure planning. By leveraging insights from deep learning models, urban development authorities can adeptly shape the urban landscape, fostering safer environments and contributing to global safety and prosperity.
International Journal of Advance Robotics & Expert Systems (JARES)jaresjournal868
Call For Papers!!!
International Journal of Advance Robotics & Expert Systems (JARES)
Web page Link: http://airccse.com/jares/index.html
Submission Deadline :June17, 2025
submission Link: http://airccse.com/submission/home.html
Contact Us : [email protected] or [email protected] or [email protected]
2. Fundamentals of Web Design
• Web design refers to the design of websites
that are displayed on the internet.
• It usually refers to the user experience aspects
of website development rather than software
development.
3. Web Page & Web Site
Webpage Website
Webpage consists of content
regarding a single entity type
Website constitutes content
regarding several entities
A direct URL link or a website can
be used to access it
A domain address is used to access
it
A combination of webpages is
created using HTML and CSS
Information is in HTML language
An individual hypertext document
linked under a website
A collection of multiple pages
hosted on the server
Stores the contents or resources
that are to be displayed on a
website
Is a place used to display the
content
4. Webpage Website
Comparatively, less complex More complex to develop
Less time to develop Takes more time to develop
The web page address of any
specific website is directly
dependent on the website address
(domain). Webpage will not work
if the domain is down
Website address (domain) is
independent of webpage address.
If the webpage is deleted for any
reason, the website will still
continue to work. All other linked
webpages will also work as usual
Examples: Contact page,
Registration Page, Service Page,
About Us page and so on
Examples: Flipkart.com,
Nykaa.com, Amazon.com and
more
5. Web Application
• A Web application (Web app) is an application
program that is stored on a remote server
and delivered over the Internet through a
browser interface.
• Web services are Web apps by definition and
many, although not all, websites contain Web
apps.
7. Web Application Website
Web application is designed
for interaction with end users.
Website basically contains
static content.
The user of web application
can read the content of web
application and also
manipulate the data.
The user of website only can
read the content of website
but not manipulate .
The web application site
should be precompiled before
deployment.
The website does not need to
be precompiled .
The function of a web
application is quite complex.
The function of website is
simple.
8. Web Application Web Site
Web application is interactive
for users.
Web site is not interactive for
users.
The browser capabilities
involved with a web application
is high.
The browser capabilities
involved with web site is high.
Integration is complex for web
application because of its
complex functionality.
Integration is simpler for web
site.
Web application mostly requires
authentication
In web site authentication is not
necessary.
EXAMPLE :- Amazon, Facebook,
etc.
EXAMPLE :- Breaking News,
Aktu website, etc.
9. Client-Server Architecture
• A client server application uses a two-tier
architecture whereas a web application uses
multi-tier architecture which consists of; user
client, middle tier, and application server.
• A web application uses a single-user system
unlike a client server application which uses
two users: client and server.
11. HTML
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for
creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• 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.
13. • The <!DOCTYPE html> declaration defines that this document
is an HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the
HTML page
• The <title> element specifies a title for the HTML page (which
is shown in the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a
container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
14. What is an HTML Element?
• An HTML element is defined by a start tag, some
content, and an end tag:
• <tagname> Content goes here... </tagname>
• The HTML element is everything from the start
tag to the end tag:
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>
15. 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>
16. 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"
The href Attribute
• The <a> tag defines a hyperlink.
The href attribute specifies the URL of the page
the link goes to:
17. <!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified
in the href attribute:</p>
<a href="https://www.beejaacademy.com">Visit Beeja Academy</a>
</body>
</html>
18. The src Attribute
• The <img> tag is used to embed an image in an HTML page.
• The src attribute specifies the path to the image to be displayed
<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename
of the image source is specified in the src attribute:</p>
<img src="img_girl.jpg" width="500" height="600">
</body>
</html>
19. The width and height Attributes
• The <img> tag should also contain the width and height attributes,
which specifies the width and height of the image (in pixels)
<!DOCTYPE html>
<html>
<body>
<h2>Width and Height Attributes</h2>
<p>The width and height attributes of the img tag, defines the width
and height of the image:</p>
<img src="img_girl.jpg" width="500" height="600">
</body>
</html>
20. The alt Attribute
• The required alt attribute for the <img> tag
specifies an alternate text for an image, if the
image for some reason cannot be displayed.
• This can be due to slow connection, or an error in
the src attribute, or if the user uses a screen
reader.
21. <!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image content, so users who
cannot see the image gets an understanding of what the image
contains:</p>
<img src="img_girl.jpg" alt="Girl with a jacket" width="500"
height="600">
</body>
</html>
22. The style Attribute
• The style attribute is used to add styles to an element, such as color,
font, size, and more.
<!DOCTYPE html>
<html>
<body>
<h2>The style Attribute</h2>
<p>The style attribute is used to add styles to an element, such as
color:</p>
<p style="color:red;">This is a red paragraph.</p>
</body>
</html>
23. The lang Attribute
• You should always include the lang attribute
inside the <html> tag, to declare the language of
the Web page. This is meant to assist search
engines and browsers.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
24. The title Attribute
• The title attribute defines some extra information about an element.
• The value of the title attribute will be displayed as a tooltip when you
mouse over the element
<!DOCTYPE html>
<html>
<body>
<h2 title="I'm a header">The title Attribute</h2>
<p title="I'm a tooltip">Mouse over this paragraph, to display the title
attribute as a tooltip.</p>
</body>
</html>
25. HTML Styles
• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment
26. HTML Text Formatting
• <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
27. HTML Colors
• HTML colors are specified with predefined color
names, or with RGB, HEX, HSL, RGBA, or HSLA
values.
• <h1 style="background-color:DodgerBlue;">Hello
World</h1>
• <h1 style="color:Tomato;">Hello World</h1>
• <h1 style="border:2px solid Tomato;">Hello
World</h1>
28. HTML RGB Colors
• An RGB color value represents RED, GREEN, and
BLUE light sources.
• An RGBA color value is an extension of RGB with
an Alpha channel (opacity).
• rgb(red, green, blue)
• Each parameter (red, green, and blue) defines
the intensity of the color with a value between 0
and 255.
• This means that there are 256 x 256 x 256 =
16777216 possible colors!
29. RGBA Color Values
• RGBA color values are an extension of RGB color
values with an Alpha channel - which specifies
the opacity for a color.
• An RGBA color value is specified with:
• rgba(red, green, blue, alpha)
• The alpha parameter is a number between 0.0
(fully transparent) and 1.0 (not transparent at all)
30. HEX Color Values
• #rrggbb
• Where rr (red), gg (green) and bb (blue) are hexadecimal
values between 00 and ff (same as decimal 0-255).
• For example, #ff0000 is displayed as red, because red is
set to its highest value (ff), and the other two (green and
blue) are set to 00.
• Another example, #00ff00 is displayed as green, because
green is set to its highest value (ff), and the other two
(red and blue) are set to 00.
• To display black, set all color parameters to 00, like this:
#000000.
• To display white, set all color parameters to ff, like this:
#ffffff.
31. HSL Color Values
• hsl(hue, saturation, lightness)
• Hue is a degree on the color wheel from 0 to 360. 0 is
red, 120 is green, and 240 is blue.
• Saturation is a percentage value, 0% means a shade of
gray, and 100% is the full color.
• Lightness is also a percentage value, 0% is black, and
100% is white.
• Saturation
• Saturation can be described as the intensity of a color.
• 100% is pure color, no shades of gray
• 50% is 50% gray, but you can still see the color.
• 0% is completely gray, you can no longer see the color.
32. HTML Styles - CSS
• CSS stands for Cascading Style Sheets.
• CSS saves a lot of work. It can control the layout
of multiple web pages all at once.
• CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML
elements
• Internal - by using a <style> element in
the <head> section
• External - by using a <link> element to link to an
external CSS file
33. Inline CSS
• An inline CSS is used to apply a unique style to a single HTML
element.
• An inline CSS uses the style attribute of an HTML element.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
34. Internal CSS
• An internal CSS is used to define a style for a single HTML page.
• An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
35. External CSS
• An external style sheet is used to define the style for many HTML pages.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
"styles.css":
body {
background-
color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
39. HTML Favicon
• A favicon is a small image displayed next to the page title in the browser
tab.
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href=“Image location or Link">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
41. Table Borders
• When you add a border to a table, you also add
borders around each table cell:
• To add a border, use the CSS border property
on table, th, and td elements:
• Example
table, th, td {
border: 1px solid black;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
48. 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.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
49. 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>
50. HTML Description Lists
• HTML also supports 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>
51. Value Description
disc Sets the list item marker to a bullet
(default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
53. Type Description
type="1" The list items will be numbered with numbers
(default)
type="A" The list items will be numbered with uppercase
letters
type="a" The list items will be numbered with lowercase
letters
type="I" The list items will be numbered with uppercase
roman numbers
type="i" The list items will be numbered with lowercase
roman numbers
55. HTML class Attribute
• The HTML class attribute is used to specify a class for an HTML element.
• Multiple HTML elements can share the same class.
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
57. HTML Iframes
• An HTML iframe is used to display a web page
within a web page.
• The HTML <iframe> tag specifies an inline
frame.
• An inline frame is used to embed another
document within the current HTML document.
• Syntax
<iframe src="url" title="description"></iframe>
58. HTML JavaScript
• JavaScript makes HTML pages more dynamic and
interactive.
• The HTML <script> tag is used to define a client-side script
(JavaScript).
• The <script> element either contains script statements, or
it points to an external script file through the src attribute.
• Common uses for JavaScript are image manipulation,
form validation, and dynamic changes of content.
• To select an HTML element, JavaScript most often uses
the document.getElementById() method.
• This JavaScript example writes "Hello JavaScript!" into an
HTML element with id="demo"
59. <!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
60. HTML Responsive Web Design
• Responsive web design is about creating web
pages that look good on all devices!
• A responsive web design will automatically
adjust for different screen sizes and viewports.
• Responsive Web Design is about using HTML
and CSS to automatically resize, hide, shrink,
or enlarge, a website, to make it look good on
all devices (desktops, tablets, and phones)
61. <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage value, the image will
scale up and down when resizing the browser window. Resize the browser
window to see the effect.</p>
<img src="image.jpg" style="width:100%;">
</body>
</html>
62. Emojis in HTML
• Emojis are characters from the UTF-8
character set: 💗
😄 😍
• Emojis look like images, or icons, but they are
not.
• They are letters (characters) from the UTF-8
(Unicode) character set.
• UTF-8 covers almost all of the characters and
symbols in the world.
• <meta charset="UTF-8">
64. HTML Forms
• An HTML form is used to collect user input. The user input is most often sent to
a server for processing.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
65. Type Description
<input type="text"> Displays a single-line text input
field
<input type="radio"> Displays a radio button (for
selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting
zero or more of many choices)
<input type="submit"> Displays a submit button (for
submitting the form)
<input type="button"> Displays a clickable button
66. Form Attributes
The Action Attribute
• The action attribute defines the action to be
performed when the form is submitted.
• Usually, the form data is sent to a file on the
server when the user clicks on the submit
button.
• In the example below, the form data is sent to
a file called "action_page.php".
• This file contains a server-side script that
handles the form data
68. The Target Attribute
• The target attribute specifies where to display the
response that is received after submitting the form.
• The target attribute can have one of the following
values
Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe
69. The Method Attribute
• The method attribute specifies the HTTP method
to be used when submitting the form data.
• The form-data can be sent as URL variables
(with method="get") or as HTTP post transaction
(with method="post").
• The default HTTP method when submitting form
data is GET.
• Example
<form action="/action_page.php" method="get">
70. The Autocomplete Attribute
• The autocomplete attribute specifies whether
a form should have autocomplete on or off.
• When autocomplete is on, the browser
automatically complete values based on
values that the user has entered before.
• Example
<form action="/
action_page.php" autocomplete="on">
71. The Novalidate Attribute
• The novalidate attribute is a boolean attribute.
• When present, it specifies that the form-data
(input) should not be validated when
submitted.
• Example
• A form with a novalidate attribute:
• <form action="/action_page.php" novalidate>
73. HTML Multimedia
• Multimedia on the web is sound, music, videos,
movies, and animations.
• To show a video in HTML, use
the <video> element:
• Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
74. HTML <video> Autoplay
• To start a video automatically, use
the autoplay attribute:
• Example
• <video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
75. HTML Audio
• The HTML <audio> element is used to play an audio file
on a web page.
• The HTML <audio> Element
• To play an audio file in HTML, use the <audio> element:
• Example
• <audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>