Scribd
Upload
12 views30 pages

Merged Presentation Choladeck

The document provides an introduction to HTML, CSS, and JavaScript, outlining their basic structures, elements, and functionalities. It covers key topics such as HTML elements, CSS styling, and JavaScript programming concepts. Each section includes examples and explanations of how to use these technologies to create and style web pages.

Uploaded by

pnegi2562
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
12 views30 pages

Merged Presentation Choladeck

The document provides an introduction to HTML, CSS, and JavaScript, outlining their basic structures, elements, and functionalities. It covers key topics such as HTML elements, CSS styling, and JavaScript programming concepts. Each section includes examples and explanations of how to use these technologies to create and style web pages.

Uploaded by

pnegi2562
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

Introduction to HTML

• HTML stands for HyperText Markup Language.


It is the standard language for creating web
pages.
Basic HTML Structure
• <!DOCTYPE html>
• <html>
• <head>
• <title>Page Title</title>
• </head>
• <body>
• <h1>This is a Heading</h1>
• <p>This is a paragraph.</p>
• </body>
HTML Elements
• HTML elements are the building blocks of
HTML pages. They are represented by tags.
HTML Attributes
• HTML attributes provide additional
information about elements. They are always
included in the opening tag.
HTML Headings
• <h1>This is heading 1</h1>
• <h2>This is heading 2</h2>
• <h3>This is heading 3</h3>
HTML Paragraphs
• <p>This is a paragraph.</p>
• <p>This is another paragraph.</p>
HTML Links
• <a href="https://www.example.com">This is a
link</a>
HTML Images
• <img src="image.jpg" alt="Image
description">
HTML Lists
• <ul>
• <li>Item 1</li>
• <li>Item 2</li>
• <li>Item 3</li>
• </ul>
HTML Tables
• <table>
• <tr>
• <th>Header 1</th>
• <th>Header 2</th>
• </tr>
• <tr>
• <td>Data 1</td>
• <td>Data 2</td>
• </tr>
Introduction to CSS
• CSS stands for Cascading Style Sheets. It is
used to style and layout web pages.
Basic CSS Syntax
• body {
• font-family: Arial, sans-serif;
• }

• h1 {
• color: blue;
• }

• p{
CSS Selectors
• CSS selectors are used to select the HTML
elements you want to style.
CSS Properties
• CSS properties are used to apply styles to the
selected elements.
CSS Box Model
• The CSS box model describes the rectangular
boxes that are generated for elements in the
document tree and laid out according to the
visual formatting model. It consists of:
• - Content area
• - Padding area
• - Border area
• - Margin area
CSS Flexbox
• Flexbox is a one-dimensional layout method
for laying out items in rows or columns. It is
designed to distribute space along a single axis
and can be used to align items within a
container.
CSS Grid Layout
• Grid layout is a two-dimensional layout system
for the web. It allows you to layout items in
rows and columns, and provides a way to align
items within a container.
CSS Media Queries
• Media queries are used to apply different
styles for different devices or screen sizes.
They allow you to create responsive designs
that adapt to different screen sizes.
CSS Animations
• CSS animations allow you to create animations
without using JavaScript or Flash. You can
animate HTML elements by changing their
properties over time.
CSS Transitions
• CSS transitions allow you to change property
values smoothly (over a given duration). They
are used to create visual effects when
elements change from one state to another.
Introduction to JavaScript
• JavaScript is a programming language that
allows you to create dynamic and interactive
web pages.
Basic JavaScript Syntax
• function myFunction() {
•
document.getElementById("demo").innerHTM
L = "Hello World!";
• }
JavaScript Variables
• Variables are containers for storing data
values.
JavaScript Functions
• Functions are blocks of code designed to
perform a particular task.
JavaScript Events
• Events are actions that can be detected by
JavaScript, such as clicking a button.
JavaScript Arrays
• Arrays are used to store multiple values in a
single variable.
JavaScript Objects
• Objects are variables that can contain many
values.
JavaScript Loops
• Loops are used to execute a block of code a
number of times.
JavaScript Conditionals
• Conditionals are used to perform different
actions based on different conditions.
JavaScript DOM Manipulation
• DOM manipulation allows you to change the
content and structure of a web page using
JavaScript.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy