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

More Related Content

HTML, CSS, JavaScript for beginners