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.
Marketo & Dynamics can be Most Excellent to Each Other – The SequelBradBedford3
So you’ve built trust in your Marketo Engage-Dynamics integration—excellent. But now what?
This sequel picks up where our last adventure left off, offering a step-by-step guide to move from stable sync to strategic power moves. We’ll share real-world project examples that empower sales and marketing to work smarter and stay aligned.
If you’re ready to go beyond the basics and do truly most excellent stuff, this session is your guide.
Key AI Technologies Used by Indian Artificial Intelligence CompaniesMypcot Infotech
Indian tech firms are rapidly adopting advanced tools like machine learning, natural language processing, and computer vision to drive innovation. These key AI technologies enable smarter automation, data analysis, and decision-making. Leading developments are shaping the future of digital transformation among top artificial intelligence companies in India.
For more information please visit here https://www.mypcot.com/artificial-intelligence
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.
Marketo & Dynamics can be Most Excellent to Each Other – The SequelBradBedford3
So you’ve built trust in your Marketo Engage-Dynamics integration—excellent. But now what?
This sequel picks up where our last adventure left off, offering a step-by-step guide to move from stable sync to strategic power moves. We’ll share real-world project examples that empower sales and marketing to work smarter and stay aligned.
If you’re ready to go beyond the basics and do truly most excellent stuff, this session is your guide.
Key AI Technologies Used by Indian Artificial Intelligence CompaniesMypcot Infotech
Indian tech firms are rapidly adopting advanced tools like machine learning, natural language processing, and computer vision to drive innovation. These key AI technologies enable smarter automation, data analysis, and decision-making. Leading developments are shaping the future of digital transformation among top artificial intelligence companies in India.
For more information please visit here https://www.mypcot.com/artificial-intelligence
Revolutionize Your Insurance Workflow with Claims Management SoftwareInsurance Tech Services
Claims management software enhances efficiency, accuracy, and satisfaction by automating processes, reducing errors, and speeding up transparent claims handling—building trust and cutting costs. Explore More - https://www.damcogroup.com/insurance/claims-management-software
AI-ASSISTED METAMORPHIC TESTING FOR DOMAIN-SPECIFIC MODELLING AND SIMULATIONmiso_uam
AI-ASSISTED METAMORPHIC TESTING FOR DOMAIN-SPECIFIC MODELLING AND SIMULATION (plenary talk at ANNSIM'2025)
Testing is essential to improve the correctness of software systems. Metamorphic testing (MT) is an approach especially suited when the system under test lacks oracles, or they are expensive to compute. However, building an MT environment for a particular domain (e.g., cloud simulation, automated driving simulation, production system simulation, etc) requires substantial effort.
To alleviate this problem, we propose a model-driven engineering approach to automate the construction of MT environments, which is especially useful to test domain-specific modelling and simulation systems. Starting from a meta-model capturing the domain concepts, and a description of the domain execution environment, our approach produces an MT environment featuring comprehensive support for the MT process. This includes the definition of domain-specific metamorphic relations, their evaluation, detailed reporting of the testing results, and the automated search-based generation of follow-up test cases.
In this talk, I presented the approach, along with ongoing work and perspectives for integrating intelligence assistance based on large language models in the MT process. The work is a joint collaboration with Pablo Gómez-Abajo, Pablo C. Cañizares and Esther Guerra from the miso research group and Alberto Núñez from UCM.
Simplify Training with an Online Induction Portal for ContractorsSHEQ Network Limited
Enhance safety and compliance with our online induction portal, designed for efficient online induction and contractor onboarding processes. Contact us on +353 214536034.
Automating Map Production With FME and PythonSafe Software
People still love a good paper map, but every time a request lands on a GIS team’s desk, it takes time to create that perfect, individual map—even when you're ready and have projects prepped. Then come the inevitable changes and iterations that add even more time to the process. This presentation explores a solution for automating map production using FME and Python. FME handles the setup of variables, leveraging GIS reference layers and parameters to manage details like map orientation, label sizes, and layout elements. Python takes over to export PDF maps for each location and template size, uploading them monthly to ArcGIS Online. The result? Fresh, regularly updated maps, ready for anyone to grab anytime—saving you time, effort, and endless revisions while keeping users happy with up-to-date, accessible maps.
How to Generate Financial Statements in QuickBooks Like a Pro (1).pdfQuickBooks Training
Are you preparing your budget for the next year, applying for a business credit card or loan, or opening a company bank account? If so, you may find QuickBooks financial statements to be a very useful tool.
These statements offer a brief, well-structured overview of your company’s finances, facilitating goal-setting and money management.
Don’t worry if you’re not knowledgeable about QuickBooks financial statements. These statements are complete reports from QuickBooks that provide an overview of your company’s financial procedures.
They thoroughly view your financial situation by including important features: income, expenses, investments, and disadvantages. QuickBooks financial statements facilitate your financial management and assist you in making wise determinations, regardless of your experience as a business owner.
Boost Student Engagement with Smart Attendance Software for SchoolsVisitu
Boosting student engagement is crucial for educational success, and smart attendance software is a powerful tool in achieving that goal. Read the doc to know more.
Micro-Metrics Every Performance Engineer Should Validate Before Sign-OffTier1 app
When it comes to performance testing, most engineers instinctively gravitate toward the big-picture indicators—response time, memory usage, throughput. But what about the smaller, more subtle indicators that quietly shape your application’s performance and stability? we explored the hidden layer of performance diagnostics that too often gets overlooked: micro-metrics. These small but mighty data points can reveal early signs of trouble long before they manifest as outages or degradation in production.
From garbage collection behavior and object creation rates to thread state transitions and blocked thread patterns, we unpacked the critical micro-metrics every performance engineer should assess before giving the green light to any release.
This session went beyond the basics, offering hands-on demonstrations and JVM-level diagnostics that help identify performance blind spots traditional tests tend to miss. We showed how early detection of these subtle anomalies can drastically reduce post-deployment issues and production firefighting.
Whether you're a performance testing veteran or new to JVM tuning, this session helped shift your validation strategies left—empowering you to detect and resolve risks earlier in the lifecycle.
zOS CommServer support for the Network Express feature on z17zOSCommserver
The IBM z17 has undergone a transformation with an entirely new System I/O hardware and architecture model for both storage and networking. The z17 offers I/O capability that is integrated directly within the Z processor complex. The new system design moves I/O operations closer to the system processor and memory. This new design approach transforms I/O operations allowing Z workloads to grow and scale to meet the growing needs of current and future IBM Hybrid Cloud Enterprise workloads. This presentation will focus on the networking I/O transformation by introducing you to the new IBM z17 Network Express feature.
The Network Express feature introduces new system architecture called Enhanced QDIO (EQDIO). EQDIO allows the updated z/OS Communications Server software to interact with the Network Express hardware using new optimized I/O operations. The new design and optimizations are required to meet the demand of the continuously growing I/O rates. Network Express and EQDIO build the foundation for the introduction of advanced Ethernet and networking capabilities for the future of IBM Z Hybrid Cloud Enterprise users.
The Network Express feature also combines the functionality of both the OSA-Express and RoCE Express features into a single feature or adapter. A single Network Express port supports both IP protocols and RDMA protocols. This allows each Network Express port to function as both a standard NIC for Ethernet and as an RDMA capable NIC (RNIC) for RoCE protocols. Converging both protocols to a single adapter reduces Z customers’ cost for physical networking resources. With this change, IBM Z customers can now exploit Shared Memory Communications (SMC) leveraging RDMA (SMC-R) technology without incurring additional hardware costs.
In this session, the speakers will focus on how z/OS Communications Server has been updated to support the Network Express feature. An introduction to the new Enhanced QDIO Ethernet (EQENET) interface statement used to configure the new OSA is provided. EQDIO provides a variety of simplifications, such as no longer requiring VTAM user defined TRLEs, uses smarter defaults and removes outdated parameters. The speakers will also cover migration considerations for Network Express. In addition, the operational aspects of managing and monitoring the new OSA and RoCE interfaces will be covered. The speakers will also take you through the enhancements made to optimize both inbound and outbound network traffic. Come join us, step aboard and learn how z/OS Communications Server is bringing you the future in network communications with the IBM z17 Network Express feature.
AI and Deep Learning with NVIDIA TechnologiesSandeepKS52
Artificial intelligence and deep learning are transforming various fields by enabling machines to learn from data and make decisions. Understanding how to prepare data effectively is crucial, as it lays the foundation for training models that can recognize patterns and improve over time. Once models are trained, the focus shifts to deployment, where these intelligent systems are integrated into real-world applications, allowing them to perform tasks and provide insights based on new information. This exploration of AI encompasses the entire process from initial concepts to practical implementation, highlighting the importance of each stage in creating effective and reliable AI solutions.
How Insurance Policy Administration Streamlines Policy Lifecycle for Agile Op...Insurance Tech Services
A modern Policy Administration System streamlines workflows and integrates with core systems to boost speed, accuracy, and customer satisfaction across the policy lifecycle. Visit https://www.damcogroup.com/insurance/policy-administration-systems for more details!
Scaling FME Flow on Demand with Kubernetes: A Case Study At Cadac Group SaaS ...Safe Software
In today’s data-driven world, efficiency is key. For Cadac, a Dutch leading provider of SaaS solutions and Autodesk Platinum partner, ensuring that customers can process data on demand is crucial to delivering a seamless experience. However, with fluctuating user demand, a challenge emerged: How do we scale FME Flow to meet on-the-fly processing needs without over-investing in infrastructure? Enter Kubernetes and KEDA (Kubernetes Event-Driven Autoscaling). In this presentation, we will explore how these cutting-edge technologies helped dynamically scale FME Flow engines based on real-time demand, without wasting resources. Instead of relying on the standard Kubernetes autoscaling based on CPU and RAM metrics, which can lead to ineffective scaling, KEDA can integrate directly with the FME Flow REST API. This allowed autoscaling based on the actual number and type of jobs in the queue. Now, whenever demand spikes, Kubernetes automatically spins up additional machines tailored to the type of workload—whether it’s CPU-intensive tasks or memory-heavy processes—ensuring optimal performance and cost-efficiency. While afterwards also autoscaling to zero, to reduce costs. Join us as we dive into how this approach helped Cadac scale on demand, reduce infrastructure costs, and provide a better experience for their customers. This session will feature both a technical walkthrough and insights on the real-world impact and value this solution has delivered to their platform and client.
The rise of e-commerce has redefined how retailers operate—and reconciliation...Prachi Desai
As payment flows grow more fragmented, the complexity of reconciliation and revenue recognition increases. The result? Mounting operational costs, silent revenue leakages, and avoidable financial risk.
Spot the inefficiencies. Automate what’s slowing you down.
https://www.taxilla.com/ecommerce-reconciliation
Build Smarter, Deliver Faster with Choreo - An AI Native Internal Developer P...WSO2
Enterprises must deliver intelligent, cloud native applications quickly—without compromising governance or scalability. This session explores how an internal developer platform increases productivity via AI for code and accelerates AI-native app delivery via code for AI. Learn practical techniques for embedding AI in the software lifecycle, automating governance with AI agents, and applying a cell-based architecture for modularity and scalability. Real-world examples and proven patterns will illustrate how to simplify delivery, enhance developer productivity, and drive measurable outcomes.
Learn more: https://wso2.com/choreo
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”.