Downloaded 17 times
Uploaded byPrakritiDhang
PPTX, PDF1,113 views
HTML, CSS, JavaScript for beginners
The document provides a beginner's guide to HTML, CSS, and JavaScript, explaining their fundamentals and syntax. It covers HTML elements, CSS styling methods, CSS selectors, and JavaScript functionalities including inline, internal, and external scripts. Additionally, it includes examples and a practice task for creating a web page using these technologies.
Recommended
More Related Content
What's hot
Similar to HTML, CSS, JavaScript for beginners
Recently uploaded
HTML, CSS, JavaScript for beginners
- 1.HTML, CSS,JAVASCRIPTFor BeginnersPrakritiDhang22-06-2020
- 2.HTMLHyper Text MarkupLanguage
- 3.HTML• Abbreviation forHyper 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• HTMLelements 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• <!DOCTYPEhtml> defines that this document is anHTML5 document.• <html> element is the root element of an HTML page• <head> element contains meta information about theHTML page• <title> element specifies a title for the HTML page (shownin 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• Bodytag 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>
- 8.
- 9.CSS• CSS Standsfor Cascading Style Sheets• Easy to understand• Well Organized• Front-end programming language• saved with a .css extension when use external CSS.
- 10.CSS syntaxh1 {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 insertCSS• 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, andmust 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. Thestyle attribute can contain any CSS property.
- 12.Internal CSS• <!DOCTYPEhtml>• <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>
- 13.External CSSIn Example.html<!DOCTYPEhtml><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.cssbody {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><bodystyle="background-color: lightgreen;"><h1 style="color:yellow;text-align:center;">This is aheading</h1><p style="font-family: Arial; font-size: 20px; font-style:italic; ">This is a paragraph.</p></body></html>
- 15.CSS selectors1. Idselector:• 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 specificclass attribute.• To select elements with a specific class, write a dot (.)character, before the class name.
- 16.Example• <!DOCTYPE html>•<html>• <head>• <title> Example 2</title>• <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>• </body>• </html>
- 17.
- 18.JavaScript• Is aprogramming 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 andmany types of graphics.• saved with a .js extension.
- 19.Inline JavaScript• <!DOCTYPEhtml>• <html>• <head>• <title> Example 1</title>• <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='document.getElementById("head2").innerHTML = "This is JavaScript!"'>Click Me!</button>• </body>• </html>
- 20.Internal JavaScript• <!DOCTYPEhtml>• <html>• <head>• <title> Example 1</title>• <style>• body {• background-color: lightgreen;• }• #head1{• color: yellow;• text-align: center;• }• .para1 {• font-family: Arial;• font-size: 20px;• font-style:italic;• }• </style>• <script>• function clickme(){• document.getElementById("head2").innerHTML = "This is JavaScript";• }• </script>• </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>
- 21.External JavaScript• <!DOCTYPEhtml>• <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.jsfunction clickme(){document.getElementById("head2").innerHTML= "This is JavaScript";}
- 22.Practice1. Create aweb page with a title “My tour”• Use heading size 2, “My trip to ….” . Add a paragraphand write about the place. Your name should be inhead size 4.• Use external css. Add text color to both headings andparagraph, the heading should be in bold andparagraph should be in italics. Add background colorto light blue.• Use external JavaScript, when clicking the button, itshould display your name.
- 23.In Next Lessonwe will learn• How to use lists, tables, images and hyperlinks.• Use javascript to resize image size.
- 24.