This document provides a basic introduction to HTML and CSS. It discusses the history of HTML, how HTML is used to define page structure while CSS is used for presentation. It then covers common HTML tags like headings, paragraphs, lists, links and tables. It also discusses the different ways of implementing CSS - inline styles, internal and external stylesheets. The document aims to explain the fundamentals of HTML and CSS for beginners.
The document summarizes Workshop #2 on web development hosted by Sohail Asghar and Saad Mustafa. It covers the basics of HTML, CSS, and JavaScript. For HTML, it discusses basic tags like headings, paragraphs, links, images and lists. For CSS, it explains concepts like selectors, colors, backgrounds, borders, fonts, padding, and margins. For JavaScript, it provides introductions to variables, output, data types, and more.
HTML is a markup language used to define the structure and layout of web pages. HTML uses tags to annotate text, images, and other content for display in a web browser. Some key HTML tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, <ul> and <ol> for unordered and ordered lists. CSS can be used to style and lay out HTML elements.
This document discusses HTML and CSS. It provides an overview of HTML, describing it as a markup language used to define web pages using tags. It gives examples of basic HTML tags and page structure. It also covers CSS, explaining that CSS is used to style and lay out HTML elements, including different ways of inserting CSS like inline, internal, and external stylesheets. The document provides examples of HTML code and CSS code.
This document provides an overview of HTML and CSS for creating interactive web pages. It defines HTML as the standard markup language used to describe web page structure using elements like <head>, <body>, <h1>, and <p>. CSS is used to format and style HTML elements, and can be added inline, internally, or through external stylesheets. Key HTML tags are explained, like <img> for embedding images. The document also covers basic CSS syntax and how it is used to control properties like colors, fonts, spacing and layout.
HTML defines the structure and layout of a web page. It uses elements like <h1> for headings and <p> for paragraphs to structure content. CSS can be used to style HTML elements by specifying properties for things like color, font, size, and layout. JavaScript can dynamically update HTML content and attributes, adding interactivity to web pages. It is one of the core languages all web developers must learn along with HTML and CSS.
HTML defines the structure and layout of a web page. It uses elements like <h1> for headings and <p> for paragraphs to structure content. CSS can be used to style HTML elements by specifying properties for things like color, font, size, and layout. JavaScript can dynamically update HTML content and attributes, adding interactivity to web pages. It is one of the core languages all web developers must learn along with HTML and CSS.
The document discusses HTML, CSS, and JavaScript. It provides an overview of each technology including code structure, common tags, how to insert stylesheets, basic syntax, control structures, and the document object model. It also gives examples of how the three are used together to add interactivity and dynamic content to web pages.
Introduction to Web Technology and Web Page DevelopmentBhargaviDalal4
This document provides an introduction to HTML and the web. It discusses key topics like the difference between the Internet and the World Wide Web, how web servers and clients communicate, URLs, and common HTML tags. It provides examples of basic HTML elements like paragraphs, headings, lists, links and images. It also introduces CSS for styling HTML documents and explains why CSS is used to define styles for web pages. Finally, it outlines a task for a lab on designing an HTML form using interactive CSS and images/tables.
DESIGN THINKING SYLLABUS MATERIAL NOTES UNIT 1 .pptxbmit1
This document provides an overview of HTML and CSS for a lab exercise on creating interactive web sites. It defines HTML as the standard markup language used to structure web pages and describes common HTML elements like headings, paragraphs, and images. It then defines CSS as the language used to format and style HTML elements, describing how CSS can be added inline, internally, or via external stylesheets to control properties like colors, fonts, spacing, and layout. The document provides examples of HTML code and both internal and external CSS.
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.
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.
This document provides an overview of HTML, CSS, and JavaScript. It begins with an introduction to HTML, describing its purpose, basic syntax and structure, and common elements. It then discusses CSS, explaining what style sheets are, how they are used to separate presentation from content, and basic CSS syntax including selectors and declarations. The document provides examples of using CSS to style text, backgrounds, and layout. It also covers CSS properties for fonts, colors, positioning, and boxes. Finally, it mentions JavaScript briefly at the end of the agenda.
HTML is a markup language used to define the structure and layout of web pages. It uses tags like <h1> and <p> to mark headings and paragraphs. CSS is used to style and lay out HTML elements, using selectors, declarations, and properties to change things like colors and positioning. JavaScript can be added to HTML pages with <script> tags and is used to add interactive elements and dynamic behavior by manipulating HTML and responding to user input. It has data types like strings and numbers and control structures like if/else statements.
The document provides an introduction to HTML and CSS terms and concepts, including:
- Common HTML terms like elements, tags, attributes, and how to structure an HTML document
- Common CSS terms like selectors, properties, and values
- How to link an external CSS stylesheet to an HTML document
HTML defines the structure and layout of a web page. It uses tags like <html> and <body> to mark up headings, paragraphs, links and other content. CSS is used to define styles and format the presentation of HTML elements, including colors, backgrounds, borders, font sizes and more. JavaScript can be added to HTML pages to create dynamic and interactive effects like form validation and content sliders.
HTML and CSS document that discusses:
1) HTML is the markup language used to define the structure and layout of web pages. CSS is used to style and lay out HTML elements.
2) The document covers HTML basics like tags for headings, paragraphs, and tables. It also discusses how to attach CSS styles using internal and external style sheets.
3) The document provides an overview of HTML5, the latest version, and CSS3, which introduces new selectors, properties, and multimedia capabilities.
The document provides an overview of an introductory HTML and CSS class. It outlines the agenda which includes learning key concepts of HTML and CSS, going over assignments, and completing challenges with support. The instructor introduces themselves and assistants and asks attendees to introduce themselves. It then covers basic concepts like how the web works, the roles of clients and servers, and an example using Facebook. It dives into explanations of HTML, CSS, common tags and elements, and how CSS can be used to style HTML. The document emphasizes using Google to research solutions and finds the assignments are located online.
This document provides an overview of HTML and CSS topics for a Partner Certification course. It includes brief explanations and examples of common HTML elements and tags like headings, paragraphs, links and images. It also covers the basics of CSS including the different types of style sheets (external, internal, inline), CSS syntax, and how to style Pardot forms using internal style sheets. The document concludes by noting students will take a test to pass this portion of the certification.
HTML5: Introduction, Why HTML5? Formatting text by using tags, using lists and backgrounds, Creating hyperlinks and anchors. Style sheets, CSS formatting text using style sheets, formatting paragraphs using style sheets.
HTML is a markup language used to define the structure and layout of web pages. Key points:
- HTML uses tags like <h1> and <p> to mark up headings, paragraphs, and other elements. A web browser reads HTML tags to display web pages.
- Common HTML elements include headings, paragraphs, links, images, lists, and tables. CSS can be used to style and lay out HTML elements.
- HTML documents have a basic structure including <html>, <head>, and <body> tags where content is placed.
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.
This document provides an overview of HTML elements and tags for creating web pages. It discusses common HTML tags like headings, paragraphs, links, images, lists, forms, and tables. It also covers CSS for styling HTML elements and JavaScript for adding interactivity. The document is intended as a tutorial for learning basic HTML.
The document provides information about HTML (Hypertext Markup Language). It discusses that HTML is the standard markup language used to create web pages. It consists of elements that tell browsers how to display content. The document also describes common HTML tags like headings, paragraphs, links, lists, and attributes that can provide additional information to elements. It explains the structure of an HTML document and provides examples of basic HTML code.
Who will create the languages of the future?Jordi Cabot
Will future languages be created by language engineers?
Can you "vibe" a DSL?
In this talk, we will explore the changing landscape of language engineering and discuss how Artificial Intelligence and low-code/no-code techniques can play a role in this future by helping in the definition, use, execution, and testing of new languages. Even empowering non-tech users to create their own language infrastructure. Maybe without them even realizing.
Artificial Intelligence Applications Across IndustriesSandeepKS52
Artificial Intelligence is a rapidly growing field that influences many aspects of modern life, including transportation, healthcare, and finance. Understanding the basics of AI provides insight into how machines can learn and make decisions, which is essential for grasping its applications in various industries. In the automotive sector, AI enhances vehicle safety and efficiency through advanced technologies like self-driving systems and predictive maintenance. Similarly, in healthcare, AI plays a crucial role in diagnosing diseases and personalizing treatment plans, while in financial services, it helps in fraud detection and risk management. By exploring these themes, a clearer picture of AI's transformative impact on society emerges, highlighting both its potential benefits and challenges.
More Related Content
Similar to HTML, CSS BASICS OF HTML AND CSS USED IN WEBSITE.pptx (20)
Introduction to Web Technology and Web Page DevelopmentBhargaviDalal4
This document provides an introduction to HTML and the web. It discusses key topics like the difference between the Internet and the World Wide Web, how web servers and clients communicate, URLs, and common HTML tags. It provides examples of basic HTML elements like paragraphs, headings, lists, links and images. It also introduces CSS for styling HTML documents and explains why CSS is used to define styles for web pages. Finally, it outlines a task for a lab on designing an HTML form using interactive CSS and images/tables.
DESIGN THINKING SYLLABUS MATERIAL NOTES UNIT 1 .pptxbmit1
This document provides an overview of HTML and CSS for a lab exercise on creating interactive web sites. It defines HTML as the standard markup language used to structure web pages and describes common HTML elements like headings, paragraphs, and images. It then defines CSS as the language used to format and style HTML elements, describing how CSS can be added inline, internally, or via external stylesheets to control properties like colors, fonts, spacing, and layout. The document provides examples of HTML code and both internal and external CSS.
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.
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.
This document provides an overview of HTML, CSS, and JavaScript. It begins with an introduction to HTML, describing its purpose, basic syntax and structure, and common elements. It then discusses CSS, explaining what style sheets are, how they are used to separate presentation from content, and basic CSS syntax including selectors and declarations. The document provides examples of using CSS to style text, backgrounds, and layout. It also covers CSS properties for fonts, colors, positioning, and boxes. Finally, it mentions JavaScript briefly at the end of the agenda.
HTML is a markup language used to define the structure and layout of web pages. It uses tags like <h1> and <p> to mark headings and paragraphs. CSS is used to style and lay out HTML elements, using selectors, declarations, and properties to change things like colors and positioning. JavaScript can be added to HTML pages with <script> tags and is used to add interactive elements and dynamic behavior by manipulating HTML and responding to user input. It has data types like strings and numbers and control structures like if/else statements.
The document provides an introduction to HTML and CSS terms and concepts, including:
- Common HTML terms like elements, tags, attributes, and how to structure an HTML document
- Common CSS terms like selectors, properties, and values
- How to link an external CSS stylesheet to an HTML document
HTML defines the structure and layout of a web page. It uses tags like <html> and <body> to mark up headings, paragraphs, links and other content. CSS is used to define styles and format the presentation of HTML elements, including colors, backgrounds, borders, font sizes and more. JavaScript can be added to HTML pages to create dynamic and interactive effects like form validation and content sliders.
HTML and CSS document that discusses:
1) HTML is the markup language used to define the structure and layout of web pages. CSS is used to style and lay out HTML elements.
2) The document covers HTML basics like tags for headings, paragraphs, and tables. It also discusses how to attach CSS styles using internal and external style sheets.
3) The document provides an overview of HTML5, the latest version, and CSS3, which introduces new selectors, properties, and multimedia capabilities.
The document provides an overview of an introductory HTML and CSS class. It outlines the agenda which includes learning key concepts of HTML and CSS, going over assignments, and completing challenges with support. The instructor introduces themselves and assistants and asks attendees to introduce themselves. It then covers basic concepts like how the web works, the roles of clients and servers, and an example using Facebook. It dives into explanations of HTML, CSS, common tags and elements, and how CSS can be used to style HTML. The document emphasizes using Google to research solutions and finds the assignments are located online.
This document provides an overview of HTML and CSS topics for a Partner Certification course. It includes brief explanations and examples of common HTML elements and tags like headings, paragraphs, links and images. It also covers the basics of CSS including the different types of style sheets (external, internal, inline), CSS syntax, and how to style Pardot forms using internal style sheets. The document concludes by noting students will take a test to pass this portion of the certification.
HTML5: Introduction, Why HTML5? Formatting text by using tags, using lists and backgrounds, Creating hyperlinks and anchors. Style sheets, CSS formatting text using style sheets, formatting paragraphs using style sheets.
HTML is a markup language used to define the structure and layout of web pages. Key points:
- HTML uses tags like <h1> and <p> to mark up headings, paragraphs, and other elements. A web browser reads HTML tags to display web pages.
- Common HTML elements include headings, paragraphs, links, images, lists, and tables. CSS can be used to style and lay out HTML elements.
- HTML documents have a basic structure including <html>, <head>, and <body> tags where content is placed.
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.
This document provides an overview of HTML elements and tags for creating web pages. It discusses common HTML tags like headings, paragraphs, links, images, lists, forms, and tables. It also covers CSS for styling HTML elements and JavaScript for adding interactivity. The document is intended as a tutorial for learning basic HTML.
The document provides information about HTML (Hypertext Markup Language). It discusses that HTML is the standard markup language used to create web pages. It consists of elements that tell browsers how to display content. The document also describes common HTML tags like headings, paragraphs, links, lists, and attributes that can provide additional information to elements. It explains the structure of an HTML document and provides examples of basic HTML code.
Who will create the languages of the future?Jordi Cabot
Will future languages be created by language engineers?
Can you "vibe" a DSL?
In this talk, we will explore the changing landscape of language engineering and discuss how Artificial Intelligence and low-code/no-code techniques can play a role in this future by helping in the definition, use, execution, and testing of new languages. Even empowering non-tech users to create their own language infrastructure. Maybe without them even realizing.
Artificial Intelligence Applications Across IndustriesSandeepKS52
Artificial Intelligence is a rapidly growing field that influences many aspects of modern life, including transportation, healthcare, and finance. Understanding the basics of AI provides insight into how machines can learn and make decisions, which is essential for grasping its applications in various industries. In the automotive sector, AI enhances vehicle safety and efficiency through advanced technologies like self-driving systems and predictive maintenance. Similarly, in healthcare, AI plays a crucial role in diagnosing diseases and personalizing treatment plans, while in financial services, it helps in fraud detection and risk management. By exploring these themes, a clearer picture of AI's transformative impact on society emerges, highlighting both its potential benefits and challenges.
AI-Powered Compliance Solutions for Global Regulations | Certivocertivoai
Certivo offers AI-powered compliance solutions designed to help businesses in the USA, EU, and UK simplify complex regulatory demands. From environmental and product compliance to safety, quality, and sustainability, our platform automates supplier documentation, manages certifications, and integrates with ERP/PLM systems. Ensure seamless RoHS, REACH, PFAS, and Prop 65 compliance through predictive insights and multilingual support. Turn compliance into a competitive edge with Certivo’s intelligent, scalable, and audit-ready platform.
Looking for a BIRT Report Alternative Here’s Why Helical Insight Stands Out.pdfVarsha Nayak
The search for an Alternative to BIRT Reports has intensified as companies face challenges with BIRT's steep learning curve, limited visualization capabilities, and complex deployment requirements. Organizations need reporting solutions that offer intuitive design interfaces, comprehensive analytics features, and seamless integration capabilities – all while maintaining the reliability and performance that enterprise environments demand.
Women in Tech: Marketo Engage User Group - June 2025 - AJO with AWSBradBedford3
Creating meaningful, real-time engagement across channels is essential to building lasting business relationships. Discover how AWS, in collaboration with Deloitte, set up one of Adobe's first instances of Journey Optimizer B2B Edition to revolutionize customer journeys for B2B audiences.
This session will share the use cases the AWS team has the implemented leveraging Adobe's Journey Optimizer B2B alongside Marketo Engage and Real-Time CDP B2B to deliver unified, personalized experiences and drive impactful engagement.
They will discuss how they are positioning AJO B2B in their marketing strategy and how AWS is imagining AJO B2B and Marketo will continue to work together in the future.
Whether you’re looking to enhance customer journeys or scale your B2B marketing efforts, you’ll leave with a clear view of what can be achieved to help transform your own approach.
Speakers:
Britney Young Senior Technical Product Manager, AWS
Erine de Leeuw Technical Product Manager, AWS
Automated Migration of ESRI Geodatabases Using XML Control Files and FMESafe Software
Efficient data migration is a critical challenge in geospatial data management, especially when working with complex data structures. This presentation explores an automated approach to migrating ESRI Geodatabases using FME and XML-based control files. A key advantage of this method is its adaptability: changes to the data model are seamlessly incorporated into the migration process without requiring modifications to the underlying FME workflow. By separating data model definitions from migration logic, this approach ensures flexibility, reduces maintenance effort, and enhances scalability.
Integrating Survey123 and R&H Data Using FMESafe Software
West Virginia Department of Transportation (WVDOT) actively engages in several field data collection initiatives using Collector and Survey 123. A critical component for effective asset management and enhanced analytical capabilities is the integration of Geographic Information System (GIS) data with Linear Referencing System (LRS) data. Currently, RouteID and Measures are not captured in Survey 123. However, we can bridge this gap through FME Flow automation. When a survey is submitted through Survey 123 for ArcGIS Portal (10.8.1), it triggers FME Flow automation. This process uses a customized workbench that interacts with a modified version of Esri's Geometry to Measure API. The result is a JSON response that includes RouteID and Measures, which are then applied to the feature service record.
Insurance policy management software transforms complex, manual insurance operations into streamlined, efficient digital workflows, enhancing productivity, accuracy, customer service, and profitability for insurers. Visit https://www.damcogroup.com/insurance/policy-management-software for more details!
What is data visualization and how data visualization tool can help.pdfVarsha Nayak
An open source data visualization tool enhances this process by providing flexible, cost-effective solutions that allow users to customize and scale their visualizations according to their needs. These tools enable organizations to make data-driven decisions with complete freedom from proprietary software limitations. Whether you're a data scientist, marketer, or business leader, understanding how to utilize an open source data visualization tool can significantly improve your ability to communicate insights effectively.
Wondershare PDFelement Pro 11.4.20.3548 Crack Free DownloadPuppy jhon
➡ 🌍📱👉COPY & PASTE LINK👉👉👉 ➤ ➤➤ https://drfiles.net/
Wondershare PDFelement Professional is professional software that can edit PDF files. This digital tool can manipulate elements in PDF documents.
Zoneranker’s Digital marketing solutionsreenashriee
Zoneranker offers expert digital marketing services tailored for businesses in Theni. From SEO and PPC to social media and content marketing, we help you grow online. Partner with us to boost visibility, leads, and sales.
Application Modernization with Choreo - The AI-Native Internal Developer Plat...WSO2
In this slide deck, we explore the challenges and best practices of application modernization. We also deep dive how an internal developer platform as a service like Choreo can fast track your modernization journey with AI capabilities and end-to-end workflow automation.
FME as an Orchestration Tool - Peak of Data & AI 2025Safe Software
Processing huge amounts of data through FME can have performance consequences, but as an orchestration tool, FME is brilliant! We'll take a look at the principles of data gravity, best practices, pros, cons, tips and tricks. And of course all spiced up with relevant examples!
Plooma is a writing platform to plan, write, and shape books your wayPlooma
Plooma is your all in one writing companion, designed to support authors at every twist and turn of the book creation journey. Whether you're sketching out your story's blueprint, breathing life into characters, or crafting chapters, Plooma provides a seamless space to organize all your ideas and materials without the overwhelm. Its intuitive interface makes building rich narratives and immersive worlds feel effortless.
Packed with powerful story and character organization tools, Plooma lets you track character development and manage world building details with ease. When it’s time to write, the distraction-free mode offers a clean, minimal environment to help you dive deep and write consistently. Plus, built-in editing tools catch grammar slips and style quirks in real-time, polishing your story so you don’t have to juggle multiple apps.
What really sets Plooma apart is its smart AI assistant - analyzing chapters for continuity, helping you generate character portraits, and flagging inconsistencies to keep your story tight and cohesive. This clever support saves you time and builds confidence, especially during those complex, detail packed projects.
Getting started is simple: outline your story’s structure and key characters with Plooma’s user-friendly planning tools, then write your chapters in the focused editor, using analytics to shape your words. Throughout your journey, Plooma’s AI offers helpful feedback and suggestions, guiding you toward a polished, well-crafted book ready to share with the world.
With Plooma by your side, you get a powerful toolkit that simplifies the creative process, boosts your productivity, and elevates your writing - making the path from idea to finished book smoother, more fun, and totally doable.
Get Started here: https://www.plooma.ink/
Meet You in the Middle: 1000x Performance for Parquet Queries on PB-Scale Dat...Alluxio, Inc.
Alluxio Webinar
June 10, 2025
For more Alluxio Events: https://www.alluxio.io/events/
Speaker:
David Zhu (Engineering Manager @ Alluxio)
Storing data as Parquet files on cloud object storage, such as AWS S3, has become prevalent not only for large-scale data lakes but also as lightweight feature stores for training and inference, or as document stores for Retrieval-Augmented Generation (RAG). However, querying petabyte-to-exabyte-scale data lakes directly from S3 remains notoriously slow, with latencies typically ranging from hundreds of milliseconds to several seconds.
In this webinar, David Zhu, Software Engineering Manager at Alluxio, will present the results of a joint collaboration between Alluxio and a leading SaaS and data infrastructure enterprise that explored leveraging Alluxio as a high-performance caching and acceleration layer atop AWS S3 for ultra-fast querying of Parquet files at PB scale.
David will share:
- How Alluxio delivers sub-millisecond Time-to-First-Byte (TTFB) for Parquet queries, comparable to S3 Express One Zone, without requiring specialized hardware, data format changes, or data migration from your existing data lake.
- The architecture that enables Alluxio’s throughput to scale linearly with cluster size, achieving one million queries per second on a modest 50-node deployment, surpassing S3 Express single-account throughput by 50x without latency degradation.
- Specifics on how Alluxio offloads partial Parquet read operations and reduces overhead, enabling direct, ultra-low-latency point queries in hundreds of microseconds and achieving a 1,000x performance gain over traditional S3 querying methods.
2. 2
HTML Basics
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 is Not Case Sensitive
3. 3
Example of HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Title of Page</title>
</head>
<body>
<p> Life begins at the end <br> of your comfort zone </p>
</body>
</html>
4. 4
Explanation of the Example
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).
5. 5
Explanation of the Example
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 <p> element defines a paragraph.
6. 6
HTML Basics
Every HTML document begins with an HTML
document tag. Although this is not mandatory, it is a
good convention to start the document with this
below-mentioned tag.
<!DOCTYPE html>
Every HTML code must be enclosed between basic
HTML tags. It begins with <html> and ends
with </html> tag.
7. 7
HTML Basics
The head tag comes next which contains all the
header information of the web page or documents
like the title of the page and other miscellaneous
information. This information is enclosed within the
head tag which opens with <head> and ends
with </head>.
We can mention the title of a web page using
the <title> tag. This is header information and hence
is mentioned within the header tags. The tag begins
with <title> and ends with </title>.
8. 8
HTML Basics
The body tag contains the actual body of the page
which will be visible to all the users. This opens
with <body> and ends with </body>. All content is
enclosed within this tag.
9. 9
HTML Elements
The HTML element is everything from the start tag to the
end tag:
<tagname> Content goes here... </tagname>
Example
<p> is starting tag of a paragraph, and </p> is
closing tag of the same paragraph but,
<p> This is paragraph </p>
is an element.
10. 10
HTML Elements
Empty Elements
Some HTML elements have no content (like the <br>
element). These elements are called empty
elements. Empty elements do not have an end tag.
Nested HTML Elements
An element within an element is called nested
element.
11. 11
Example of Nested Element
<!DOCTYPE html>
<html>
<head>
<title> My first Program </title>
</head>
<body>
<p>My first paragraph</p>
</body>
</html>
12. 12
HTML Attributes
Attributes provide additional information about
elements. They are always specified in the start tag.
Example
<img> Element
<img src=“image.jpg" alt=“alternative text“
width="500" height="600">
src, alt, width and height are attributes of <img>
13. 13
HTML Attributes
<a> element
<a href="https://www.google.com"> click here </a>
Href is an attribute of <a>
<p> element
<p align=“left”> This is left aligned </p>
Align is an attribute of <p>
14. 14
HTML Basics
HTML Headings
These tags help us to give headings to the content of a
webpage. These tags are mainly written inside the body
tag. HTML provides us with six heading tags
from <h1> to <h6>. <h1> defines the most important
heading. Every tag displays the heading in a different
style and font size.
HTML Paragraph
These tags help us to write paragraph statements on a
webpage. They start with the <p> tag and ends
with </p>.
15. 15
HTML Basics
HTML Break
These tags are used for inserting a single line type break. It does
not have any closing tag. In HTML the break tag is written as <br>.
Example:
<!DOCTYPE html>
<html>
<head>
<title> My first Program </title>
</head>
<body>
<p> Life begins at the end <br> of your comfort zone </p>
</body>
</html>
16. 16
HTML Horizontal Line
The <hr> tag is used to break the page into various parts,
creating horizontal margins with help of a horizontal line
running from the left to right-hand side of the page. This is
also an empty tag and doesn’t take any additional
statements.
HTML Images
The image tag is used to insert an image into our web
page. <img src=”source_of_image” alt=“alternative
text“>
HTML Basics
17. 17
HTML Basics
Anchor Tag
The <a> tag defines a hyperlink, which is used to link
from one page to another.
<a href="https://www.google.com"> click here</a>
<b> Tag
This is used to bold the text.
<p>This is normal text<b>and this is bold
text</b></p>
18. 18
<i> Tag
It is used to italicize the text in HTML
<p><i>This is Italicized text</i>This is simple text</p>
<u> Tag
It is used to underline the text in HTML.
<p>This is some <u>underlined</u> text.</p>
HTML Basics
20. 20
What is CSS
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be
displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of
multiple web pages all at once
External stylesheets are stored in CSS files
21. 21
CSS Syntax
The selector points to the HTML element you want to
style.
The declaration block contains one or more declarations
separated by semicolons.
Each declaration includes a CSS property name and a
value, separated by a colon.
Multiple CSS declarations are separated with semicolons,
and declaration blocks are surrounded by curly braces.
22. 22
How to add CSS
There are three ways of inserting CSS
External CSS
Internal CSS
Inline CSS
External CSS
With an external style sheet, we can change the look of
an entire website by changing just one file!
Each HTML page must include a reference to the
external style sheet file inside the <link> element, inside
the head section.
23. 23
Example of External CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="m
ystyle.css">
</head>
<body>
<h1>heading</h1>
<p>paragraph.</p>
</body>
</html>
External styles are defined
within the <link> element,
inside the <head> section
of an HTML page
An external style sheet
can be written in any text
editor, and must be
saved with a .css
extension.
With an external style
sheet, you can change
the look of an entire
website by changing just
one file
24. 24
Example of External CSS
Here is how the
"mystyle.css" file looks:
body {
background-
color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
25. 25
Example of Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink; }
h1 {
color: blue;
margin-left: 40px; }
</style>
</head>
<body>
<h1>heading</h1>
<p>paragraph.</p>
</body>
</html>
An internal style sheet
may be used if one single
HTML page has a unique
style.
Internal styles are defined
within the <style>
element, inside the
<head> section of an
HTML page
26. 26
Example of Inline CSS
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-
align:center;">heading</h1>
<p style="color:red;">paragra
ph.</p>
</body>
</html>
An inline style may be
used to apply a unique
style for a single element.
To use inline styles, add
the style attribute to the
relevant element. The
style attribute can
contain any CSS
property.
27. 27
Multiple Style Sheets
If some properties have been defined for the same
selector (element) in different style sheets, the value
from the last read style sheet will be used.
Assume that an external style sheet has the following
style for the <h1> element:
h1 {
color: red;
}
28. 28
Multiple Style Sheets
Then, assume that an internal style sheet also has the
following style for the <h1> element:
h1{
color: blue;
}
Now, if the internal style is defined after the link to the
external style sheet, the <h1> elements will be “blue“:
30. 30
Multiple Style Sheets
If the internal style is
defined before the link
to the external style
sheet, the <h1>
elements will be “red":
<head>
<style>
h1 {
color: blue;
}
</style>
<link rel="stylesheet“
href="mystyle.css">
</head>
31. 31
Multiple Style Sheets
If the internal style is defined before the link to the
external style sheet, but still we want blue color for
<h1> elements. Then we have to use !important rule.
The !important rule in CSS is used to add more
importance to a property/value than normal.
In fact, if we use the !important rule, it will override ALL
previous styling rules for that specific property on that
element.
32. 32
Multiple Style Sheets
<head>
<style>
h1 {
color: blue !important;
}
</style>
<link rel="stylesheet“
href="mystyle.css">
</head>
Now, the <h1>
elements will be
“blue”.