HTML, CSS, JavaScript for beginners

HTML, CSS,
JAVASCRIPT
For Beginners
Prakriti Dhang
22-06-2020

HTML
Hyper Text Markup Language

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

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>

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

Body elements
• Body tag contains all the visible contents,
 Headings (h1-h6),
 Paragraphs,
 Images,
 Hyperlinks,
 Tables,
 Lists, etc.

Example
• <!DOCTYPE html>
• <html>
• <head>
• <title> Example 1</title>
• </head>
• <body>
• <h1> WELCOME! </h1>
• <p>Welcome to my first page.</p>
• </body>
• </html>

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.

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

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.

Internal CSS
• <!DOCTYPE html>
• <html>
• <head>
• <title> Example 1 </title>
• <style>
• body {
• background-color: lightgreen;
• }
• h1 {
• color: yellow;
• text-align: center;
• }
• p {
• font-family: Arial;
• font-size: 20px;
• font-style:italic;
• }
• </style>
• </head>
• <body>
• <h1> WELCOME! </h1>
• <p>Welcome to my first page.</p>
• </body>
• </html>

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;
}

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>

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.

Example
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body {
• }
• #head1 {
• color: yellow;
• }
• .para1{
• }
• </style>
• </head>
• <body>
• <h1 id=“head1”> WELCOME! </h1>
• <p class=“para1”>Welcome to my first page.</p>
• </body>
• </html>

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.

Inline JavaScript
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body {
• }
• #head1{
• color: yellow;
• }
• .para1 {
• }
• </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='document.getElementById("head2").innerHTML = "This is JavaScript!"'>Click Me!</button>
• </body>
• </html>

Internal JavaScript
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body {
• }
• #head1{
• color: yellow;
• }
• .para1 {
• }
• </style>
• <script>
• function clickme(){
• document.getElementById("head2").innerHTML = "This is JavaScript";
• }
• </script>
• </head>
• <body>
• <h2 id="head2"> </h2>
• <button type="button" onclick="clickme()">Click Me!</button>
• </body>
• </html>

External JavaScript
• <!DOCTYPE html>
• <html>
• <head>
• <script type="text/javascript" src="exjse.js"></script>
• <style>
• body {
• }
• #head1{
• color: yellow;
• }
• .para1 {
• }
• </style>
• </head>
• <body>
• <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";
}

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.

In Next Lesson we will learn
• How to use lists, tables, images and hyperlinks.
• Use javascript to resize image size.

HTML, CSS, JavaScript for beginners

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML, CSS, JavaScript for beginners

Similar to HTML, CSS, JavaScript for beginners (20)

Recently uploaded

Recently uploaded (20)

HTML, CSS, JavaScript for beginners