3. HTML
• Abbreviation for Hyper Text Markup Language
• Is the standard markup language for creating web pages.
• Easy to understand
• Well Organized
• Front-end programming language
• saved with a .html extension
4. HTML elements
• HTML elements has starting tag, contents and closing tag
<tagname> content </tagname>
• The closing tag ends with a backslash (/).
• The start tag and close tag name should be same.
• <h1> content </h1>
5. HTML elements
• <!DOCTYPE html> defines that this document is an
HTML5 document.
• <html> element is the root element of an HTML page
• <head> element contains meta information about the
HTML page
• <title> element specifies a title for the HTML page (shown
in the browser's title bar)
• <body> element defines the document's body.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
6. Body elements
• Body tag contains all the visible contents,
Headings (h1-h6),
Paragraphs,
Images,
Hyperlinks,
Tables,
Lists, etc.
7. Example
• <!DOCTYPE html>
• <html>
• <head>
• <title> Example 1</title>
• </head>
• <body>
• <h1> WELCOME! </h1>
• <p>Welcome to my first page.</p>
• </body>
• </html>
9. CSS
• CSS Stands for Cascading Style Sheets
• Easy to understand
• Well Organized
• Front-end programming language
• saved with a .css extension when use external CSS.
10. CSS syntax
h1 {
color: yellow;
text-align: center;
}
• <h1> is the selector in CSS.
• Color is the property and yellow is the value.
• Text-align is the property and center is the value
11. Ways to insert CSS
• There are 3 ways to insert CSS:
1. Internal: The internal style is defined inside the
<style> element, inside the head section.
2. External: Can be written in any text editor, and
must be saved with a .css extension. The external
.css file should not contain any HTML tags.
3. Inline: add the style attribute to the element. The
style attribute can contain any CSS property.
13. External CSS
In Example.html
<!DOCTYPE html>
<html>
<head>
<title>Example 1</title>
<link rel="stylesheet" type="text/css"
href=“stylesheet1.css">
</head>
<body>
<h1> WELCOME! </h1>
<p>Welcome to my first page.</p>
</body>
</html>
In stylesheet.css
body {
background-color: lightgreen;
}
h1 {
color: yellow;
text-align: center;
}
p {
font-family: Arial;
font-size: 20px;
font-style:italic;
}
14. Inline CSS
<!DOCTYPE html>
<html>
<body style="background-color: lightgreen;">
<h1 style="color:yellow;text-align:center;">This is a
heading</h1>
<p style="font-family: Arial; font-size: 20px; font-
style:italic; ">This is a paragraph.</p>
</body>
</html>
15. CSS selectors
1. Id selector:
• The id of an element is unique within a page.
• The id selector is used to select one unique element.
• Write a hash (#) character, before the id of the element.
2. Class selector:
• The class selector selects HTML elements with a specific
class attribute.
• To select elements with a specific class, write a dot (.)
character, before the class name.
18. JavaScript
• Is a programming language
• Is used for creating websites
• Easy to learn.
• Standalone language
• Used to make dynamic webpages
• Add special effects on webpages like rollover, roll out and
many types of graphics.
• saved with a .js extension.
21. External JavaScript
• <!DOCTYPE html>
• <html>
• <head>
• <title> Example 1</title>
• <script type="text/javascript" src="exjse.js"></script>
• <style>
• body {
• background-color: lightgreen;
• }
• #head1{
• color: yellow;
• text-align: center;
• }
• .para1 {
• font-family: Arial;
• font-size: 20px;
• font-style:italic;
• }
• </style>
• </head>
• <body>
• <h1 id="head1"> WELCOME! </h1>
• <p class="para1">Welcome to my first page.</p>
• <h2 id="head2"> </h2>
• <button type="button" onclick="clickme()">Click Me!</button>
• </body>
• </html>
Add this code in a new file and name as exjse.js
function clickme(){
document.getElementById("head2").innerHTML
= "This is JavaScript";
}
22. Practice
1. Create a web page with a title “My tour”
• Use heading size 2, “My trip to ….” . Add a paragraph
and write about the place. Your name should be in
head size 4.
• Use external css. Add text color to both headings and
paragraph, the heading should be in bold and
paragraph should be in italics. Add background color
to light blue.
• Use external JavaScript, when clicking the button, it
should display your name.
23. In Next Lesson we will learn
• How to use lists, tables, images and hyperlinks.
• Use javascript to resize image size.