The document provides an introduction to web technologies including HTML, CSS, and JavaScript. It explains that HTML is used to define the structure and content of a web page, CSS is used to control the visual styling and layout, and JavaScript is used for interactivity. It also provides overviews of topics like the anatomy of a browser, HTML tags and syntax, CSS properties and selectors, and how to start developing and testing web pages locally.
Introduction to HTML+CSS+Javascript.pptxAliRaza899305
The document provides an introduction to HTML, CSS, and JavaScript for developing web technologies. It discusses how HTML is used to define the structure and content of a web page, CSS is used to control the visual styling of web pages, and JavaScript is used to add interactivity. It also provides examples of basic HTML tags and syntax, CSS properties and selectors, and how to insert JavaScript code. Finally, it summarizes some of the main capabilities and APIs available in JavaScript.
The document provides an introduction to HTML, CSS, and JavaScript for creating web technologies. It discusses how to set up a development environment with a text editor and browser. It explains the basic structure and syntax of HTML, CSS, and JavaScript, including how to select and style elements with CSS and manipulate the DOM with JavaScript. Key topics covered include HTML tags, the box model, CSS selectors, layout systems like grid, and retrieving/modifying elements with JavaScript. The document serves as a high-level overview of the main technologies used for front-end web development.
HTML is used to define the structure and content of a web page. CSS controls the visual styling and layout of HTML elements, while JavaScript provides interactivity. The document discusses the basic anatomy of a browser and how HTML, CSS, and JavaScript are used together to build web pages. It provides examples of HTML tags and syntax, CSS properties and selectors, and how to insert JavaScript code.
The document provides an introduction to HTML and CSS terms and concepts, including:
- Common HTML terms like elements, tags, attributes, and how to structure an HTML document
- Common CSS terms like selectors, properties, and values
- How to link an external CSS stylesheet to an HTML document
The document summarizes Workshop #2 on web development hosted by Sohail Asghar and Saad Mustafa. It covers the basics of HTML, CSS, and JavaScript. For HTML, it discusses basic tags like headings, paragraphs, links, images and lists. For CSS, it explains concepts like selectors, colors, backgrounds, borders, fonts, padding, and margins. For JavaScript, it provides introductions to variables, output, data types, and more.
The document discusses HTML programming and introduces various HTML concepts. It describes HTML editors and their features like syntax highlighting, auto-completion, and error detection. Popular HTML editors like Notepad, Word, Dreamweaver, Atom, and Visual Studio code are listed. The basics of CSS like syntax, types of style sheets, selectors, and positioning elements are explained. HTML elements like headings, paragraphs, and images can be styled, grouped, and nested. Properties like visibility and display control element visibility. Transitions in CSS allow animated changes to elements.
This class covers basic HTML tags and terminology. The instructor introduces common HTML tags like <html>, <head>, <title>, <body>, <p>, <h1-h6>, <strong>, and <a> and explains how they are used. Students learn about HTML elements, self-closing tags, and attributes. The goal is for students to understand basic HTML terms and structure, know common tags, and be able to build a simple HTML page by the end of the class.
The document provides information on HTML (Hypertext Markup Language). It discusses that HTML is used to create web pages and applications, and is the most widely used language on the web. It also describes the basic structure of an HTML document and some common HTML tags like <html>, <head>, <body>, <p>, and <h1>.
The document provides an overview of full stack web development, including front-end technologies like HTML, CSS, JavaScript and back-end technologies like PHP, Java, and Python. It discusses how websites are structured and hosted, how web pages are built using HTML, and how text editors can be used to write HTML code. It also covers common web development terms like protocols, URLs, and how CSS is used to style web pages.
The document provides an overview of HTML and CSS, including:
- HTML gives content structure and meaning using elements like headings and paragraphs, while CSS is used to style the appearance of content.
- Common HTML terms are explained, like elements, tags, opening/closing tags, and attributes.
- The basic structure of an HTML document is outlined, including the <!DOCTYPE html>, <html>, <head>, and <body> elements.
- Self-closing elements are discussed, which use a single tag like <meta>.
CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of HTML documents. It allows developers to define styles for elements, such as colors, fonts, spacing, positioning, and responsiveness, to create visually appealing and consistent web pages. CSS can be applied inline, internally, or externally, and it supports features like flexbox, grid, animations, and media queries for advanced design and layout control.
This document provides an overview of HTML Training 101 in 4 parts: Core Concepts, Specific Details, Advanced Concepts, and Q&A. Part I introduces key HTML concepts like structure vs appearance, tags, and the brief history of the internet. Part II covers specific tags like headings, links, lists, and images. Part III will discuss advanced topics like cross-browser compatibility and coding with style. The document uses humor and examples to explain HTML concepts in an accessible way.
The document provides an overview of HTML (Hypertext Markup Language) including:
1) HTML is a markup language used to describe web pages using tags to structure content like headings, paragraphs, lists, links, images and tables.
2) Various HTML tags are described like <h1>-<h6> for headings, <p> for paragraphs, <b> for bold, <i> for italic, and <a> for links.
3) Additional HTML concepts covered include internal and external CSS, meta tags, images, tables, frames, iframes and cascading style sheets (CSS) for styling content.
Thinkful - Frontend Crash Course - Intro to HTML/CSSTJ Stalcup
This document provides an overview of an introductory HTML/CSS crash course. It introduces the instructor and Thinkful, discusses the goals of learning core HTML and CSS concepts through building a basic website. It covers key topics like how the web works, HTML tags and elements, CSS selectors, properties and values, and linking a CSS stylesheet to HTML. The document emphasizes practicing the concepts through building assignments and challenges students to keep learning outside of the course.
HTML gives structure and meaning to content like headings, paragraphs and images. CSS styles the appearance of content using fonts and colors. This document provides an example of basic HTML code to create a "Hello World" web page. It also explains common HTML terms like elements, tags, attributes and the required structure for all HTML documents.
Kunal Kalamkar presented an introduction to web technologies like HTML, CSS, and JavaScript at Chh. Shahu College of Engineering, Aurangabad. The presentation covered the basics of each technology - HTML is used to define document structure, CSS controls visual styling, and JavaScript adds interactivity. Examples were provided of how each technology can be used, such as HTML tags, CSS properties, and JavaScript functions. Both advantages and disadvantages of the web technologies were discussed. Finally, some mini projects implemented using HTML, CSS, and JavaScript were demonstrated, such as a college website, calculator, student registration form, and reversing numbers.
HTML and CSS document that discusses:
1) HTML is the markup language used to define the structure and layout of web pages. CSS is used to style and lay out HTML elements.
2) The document covers HTML basics like tags for headings, paragraphs, and tables. It also discusses how to attach CSS styles using internal and external style sheets.
3) The document provides an overview of HTML5, the latest version, and CSS3, which introduces new selectors, properties, and multimedia capabilities.
The document provides an agenda for a workshop on HTML, CSS, and putting them together. It covers HTML topics like semantic tags, comments, and best practices. It then discusses CSS topics such as IDs vs classes, floats, shorthand, and putting HTML and CSS together with project structure and layouts. The workshop aims to give an introduction to HTML, CSS, and how to structure websites using these languages.
Module4: Ventilation
Definition, necessity of ventilation, functional requirements, various system & selection criteria.
Air conditioning: Purpose, classification, principles, various systems
Thermal Insulation: General concept, Principles, Materials, Methods, Computation of Heat loss & heat gain in Buildings
More Related Content
Similar to Introduction to HTML-CSS-Javascript.pptx (20)
The document provides an introduction to HTML and CSS terms and concepts, including:
- Common HTML terms like elements, tags, attributes, and how to structure an HTML document
- Common CSS terms like selectors, properties, and values
- How to link an external CSS stylesheet to an HTML document
The document summarizes Workshop #2 on web development hosted by Sohail Asghar and Saad Mustafa. It covers the basics of HTML, CSS, and JavaScript. For HTML, it discusses basic tags like headings, paragraphs, links, images and lists. For CSS, it explains concepts like selectors, colors, backgrounds, borders, fonts, padding, and margins. For JavaScript, it provides introductions to variables, output, data types, and more.
The document discusses HTML programming and introduces various HTML concepts. It describes HTML editors and their features like syntax highlighting, auto-completion, and error detection. Popular HTML editors like Notepad, Word, Dreamweaver, Atom, and Visual Studio code are listed. The basics of CSS like syntax, types of style sheets, selectors, and positioning elements are explained. HTML elements like headings, paragraphs, and images can be styled, grouped, and nested. Properties like visibility and display control element visibility. Transitions in CSS allow animated changes to elements.
This class covers basic HTML tags and terminology. The instructor introduces common HTML tags like <html>, <head>, <title>, <body>, <p>, <h1-h6>, <strong>, and <a> and explains how they are used. Students learn about HTML elements, self-closing tags, and attributes. The goal is for students to understand basic HTML terms and structure, know common tags, and be able to build a simple HTML page by the end of the class.
The document provides information on HTML (Hypertext Markup Language). It discusses that HTML is used to create web pages and applications, and is the most widely used language on the web. It also describes the basic structure of an HTML document and some common HTML tags like <html>, <head>, <body>, <p>, and <h1>.
The document provides an overview of full stack web development, including front-end technologies like HTML, CSS, JavaScript and back-end technologies like PHP, Java, and Python. It discusses how websites are structured and hosted, how web pages are built using HTML, and how text editors can be used to write HTML code. It also covers common web development terms like protocols, URLs, and how CSS is used to style web pages.
The document provides an overview of HTML and CSS, including:
- HTML gives content structure and meaning using elements like headings and paragraphs, while CSS is used to style the appearance of content.
- Common HTML terms are explained, like elements, tags, opening/closing tags, and attributes.
- The basic structure of an HTML document is outlined, including the <!DOCTYPE html>, <html>, <head>, and <body> elements.
- Self-closing elements are discussed, which use a single tag like <meta>.
CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of HTML documents. It allows developers to define styles for elements, such as colors, fonts, spacing, positioning, and responsiveness, to create visually appealing and consistent web pages. CSS can be applied inline, internally, or externally, and it supports features like flexbox, grid, animations, and media queries for advanced design and layout control.
This document provides an overview of HTML Training 101 in 4 parts: Core Concepts, Specific Details, Advanced Concepts, and Q&A. Part I introduces key HTML concepts like structure vs appearance, tags, and the brief history of the internet. Part II covers specific tags like headings, links, lists, and images. Part III will discuss advanced topics like cross-browser compatibility and coding with style. The document uses humor and examples to explain HTML concepts in an accessible way.
The document provides an overview of HTML (Hypertext Markup Language) including:
1) HTML is a markup language used to describe web pages using tags to structure content like headings, paragraphs, lists, links, images and tables.
2) Various HTML tags are described like <h1>-<h6> for headings, <p> for paragraphs, <b> for bold, <i> for italic, and <a> for links.
3) Additional HTML concepts covered include internal and external CSS, meta tags, images, tables, frames, iframes and cascading style sheets (CSS) for styling content.
Thinkful - Frontend Crash Course - Intro to HTML/CSSTJ Stalcup
This document provides an overview of an introductory HTML/CSS crash course. It introduces the instructor and Thinkful, discusses the goals of learning core HTML and CSS concepts through building a basic website. It covers key topics like how the web works, HTML tags and elements, CSS selectors, properties and values, and linking a CSS stylesheet to HTML. The document emphasizes practicing the concepts through building assignments and challenges students to keep learning outside of the course.
HTML gives structure and meaning to content like headings, paragraphs and images. CSS styles the appearance of content using fonts and colors. This document provides an example of basic HTML code to create a "Hello World" web page. It also explains common HTML terms like elements, tags, attributes and the required structure for all HTML documents.
Kunal Kalamkar presented an introduction to web technologies like HTML, CSS, and JavaScript at Chh. Shahu College of Engineering, Aurangabad. The presentation covered the basics of each technology - HTML is used to define document structure, CSS controls visual styling, and JavaScript adds interactivity. Examples were provided of how each technology can be used, such as HTML tags, CSS properties, and JavaScript functions. Both advantages and disadvantages of the web technologies were discussed. Finally, some mini projects implemented using HTML, CSS, and JavaScript were demonstrated, such as a college website, calculator, student registration form, and reversing numbers.
HTML and CSS document that discusses:
1) HTML is the markup language used to define the structure and layout of web pages. CSS is used to style and lay out HTML elements.
2) The document covers HTML basics like tags for headings, paragraphs, and tables. It also discusses how to attach CSS styles using internal and external style sheets.
3) The document provides an overview of HTML5, the latest version, and CSS3, which introduces new selectors, properties, and multimedia capabilities.
The document provides an agenda for a workshop on HTML, CSS, and putting them together. It covers HTML topics like semantic tags, comments, and best practices. It then discusses CSS topics such as IDs vs classes, floats, shorthand, and putting HTML and CSS together with project structure and layouts. The workshop aims to give an introduction to HTML, CSS, and how to structure websites using these languages.
Module4: Ventilation
Definition, necessity of ventilation, functional requirements, various system & selection criteria.
Air conditioning: Purpose, classification, principles, various systems
Thermal Insulation: General concept, Principles, Materials, Methods, Computation of Heat loss & heat gain in Buildings
This presentation provides a comprehensive overview of a specialized test rig designed in accordance with ISO 4548-7, the international standard for evaluating the vibration fatigue resistance of full-flow lubricating oil filters used in internal combustion engines.
Key features include:
This presentation provides a comprehensive overview of air filter testing equipment and solutions based on ISO 5011, the globally recognized standard for performance testing of air cleaning devices used in internal combustion engines and compressors.
Key content includes:
This research presents a machine learning (ML) based model to estimate the axial strength of corroded RC columns reinforced with fiber-reinforced polymer (FRP) composites. Estimating the axial strength of corroded columns is complex due to the intricate interplay between corrosion and FRP reinforcement. To address this, a dataset of 102 samples from various literature sources was compiled. Subsequently, this dataset was employed to create and train the ML models. The parameters influencing axial strength included the geometry of the column, properties of the FRP material, degree of corrosion, and properties of the concrete. Considering the scarcity of reliable design guidelines for estimating the axial strength of RC columns considering corrosion effects, artificial neural network (ANN), Gaussian process regression (GPR), and support vector machine (SVM) techniques were employed. These techniques were used to predict the axial strength of corroded RC columns reinforced with FRP. When comparing the results of the proposed ML models with existing design guidelines, the ANN model demonstrated higher predictive accuracy. The ANN model achieved an R-value of 98.08% and an RMSE value of 132.69 kN which is the lowest among all other models. This model fills the existing gap in knowledge and provides a precise means of assessment. This model can be used in the scientific community by researchers and practitioners to predict the axial strength of FRP-strengthened corroded columns. In addition, the GPR and SVM models obtained an accuracy of 98.26% and 97.99%, respectively.
"The Enigmas of the Riemann Hypothesis" by Julio ChaiJulio Chai
In the vast tapestry of the history of mathematics, where the brightest minds have woven with threads of logical reasoning and flash-es of intuition, the Riemann Hypothesis emerges as a mystery that chal-lenges the limits of human understanding. To grasp its origin and signif-icance, it is necessary to return to the dawn of a discipline that, like an incomplete map, sought to decipher the hidden patterns in numbers. This journey, comparable to an exploration into the unknown, takes us to a time when mathematicians were just beginning to glimpse order in the apparent chaos of prime numbers.
Centuries ago, when the ancient Greeks contemplated the stars and sought answers to the deepest questions in the sky, they also turned their attention to the mysteries of numbers. Pythagoras and his followers revered numbers as if they were divine entities, bearers of a universal harmony. Among them, prime numbers stood out as the cornerstones of an infinite cathedral—indivisible and enigmatic—hiding their ar-rangement beneath a veil of apparent randomness. Yet, their importance in building the edifice of number theory was already evident.
The Middle Ages, a period in which the light of knowledge flick-ered in rhythm with the storms of history, did not significantly advance this quest. It was the Renaissance that restored lost splendor to mathe-matical thought. In this context, great thinkers like Pierre de Fermat and Leonhard Euler took up the torch, illuminating the path toward a deeper understanding of prime numbers. Fermat, with his sharp intuition and ability to find patterns where others saw disorder, and Euler, whose overflowing genius connected number theory with other branches of mathematics, were the architects of a new era of exploration. Like build-ers designing a bridge over an unknown abyss, their contributions laid the groundwork for later discoveries.
Kevin Corke Spouse Revealed A Deep Dive Into His Private Life.pdfMedicoz Clinic
Kevin Corke, a respected American journalist known for his work with Fox News, has always kept his personal life away from the spotlight. Despite his public presence, details about his spouse remain mostly private. Fans have long speculated about his marital status, but Corke chooses to maintain a clear boundary between his professional and personal life. While he occasionally shares glimpses of his family on social media, he has not publicly disclosed his wife’s identity. This deep dive into his private life reveals a man who values discretion, keeping his loved ones shielded from media attention.
This presentation provides a detailed overview of air filter testing equipment, including its types, working principles, and industrial applications. Learn about key performance indicators such as filtration efficiency, pressure drop, and particulate holding capacity. The slides highlight standard testing methods (e.g., ISO 16890, EN 1822, ASHRAE 52.2), equipment configurations (such as aerosol generators, particle counters, and test ducts), and the role of automation and data logging in modern systems. Ideal for engineers, quality assurance professionals, and researchers involved in HVAC, automotive, cleanroom, or industrial filtration systems.
This presentation outlines testing methods and equipment for evaluating gas-phase air filtration media using flat sheet samples, in accordance with ISO 10121 standards—specifically designed for assessing the performance of media used in general ventilation and indoor air quality applications.
Optimize Indoor Air Quality with Our Latest HVAC Air Filter Equipment Catalogue
Discover our complete range of high-performance HVAC air filtration solutions in this comprehensive catalogue. Designed for industrial, commercial, and residential applications, our equipment ensures superior air quality, energy efficiency, and compliance with international standards.
📘 What You'll Find Inside:
Detailed product specifications
High-efficiency particulate and gas phase filters
Custom filtration solutions
Application-specific recommendations
Maintenance and installation guidelines
Whether you're an HVAC engineer, facilities manager, or procurement specialist, this catalogue provides everything you need to select the right air filtration system for your needs.
🛠️ Cleaner Air Starts Here — Explore Our Finalized Catalogue Now!
3. Tools
What do we need to start:
● a good web-browser (Chrome or
Firefox)
● a good text editor like:
○ VSCode (cross platform)
○ Notepad++ (win)
○ textWrangler (osx)
○ sublime text (cross platform)
○ ecode (cross platform)
● the example HTML code to start
4. How can I test my code
Just open the index.html from the template in your text editor and
in your browser.
When you do any change to the code, check it in the browser by
pressing F5 (refresh site)
To open the developer tools press:
Windows: Control + Shift + I or
OSX: Command + Opt + I
Other tools are online editors like scratchpad or htmledit
6. Inside a browser
Browsers have very differentiate
parts.
We are interested in two of them:
● the Rendering Engine (in charge
of transforming our HTML+CSS
in a visual image).
● The Javascript Interpreter
(also known as VM), in charge
of executing the Javascript
code.
8. Browsers as a renderer
Browser's act as a renderer that takes
documents and construct a visual
representation of them.
Starting with the most simple one, a text
document, it will try to visualize it.
You can try, drop any .txt file into your
browser to visualize it.
The problem is that text documents without any
formatting tend to be hard to read for the user
(and quite boring).
That's why HTML was created, to give text
some format.
9. Markup language
There are many markup languages
that add special tags into the text
that the renderer wont show but use
to know how to display the text.
In HTML this tags use the next
notation:
My name is <b>Javi</b>
10. HTML
HTML means Hyper Text Markup
Language.
The HTML allow us to define the structure of a document
or a website.
HTML is NOT a programming language, it’s a markup
language, which means its purpose is to give structure to
the content of the website, not to define an algorithm.
It is a series of nested tags (it is a subset of XML) that contain
all the website information (like texts, images and videos).
Here is an example of tags:
<title>This is a title</title>
The HTML defines the page structure. A website can have
several HTMLs to different pages.
<html>
<head>
</head>
<body>
<div>
<p>Hi</p>
</div>
</body>
</html>
11. HTML: basic rules
Some rules about HTML:
● It uses XML syntax (tags with attributes, can contain other tags).
<tag_name attribute="value"> content </tag_name>
● It stores all the information that must be shown to the user.
● There are different HTML elements for different types of information and
behaviour.
● The information is stored in a tree-like structure (nodes that contain nodes inside)
called DOM (Document Object Model).
● It gives the document some semantic structure (pe. this is a title, this is a section,
this is a form) which is helpful for computers to understand websites content.
● It must not contain information related to how it should be displayed (that
information belongs to the CSS), so no color information, font size, position, etc.
12. HTML: syntax example
<div id="main">
<!-- this is a comment -->
This is text without a
tag.
<button class="mini">press
me</button>
<img src="me.png" />
</div>
13. HTML: syntax example
<div id="main">
<!-- this is a comment -->
This is text without a
tag.
<button class="mini">press
me</button>
<img
src="me.png" />
</div>
Tag
name attribute
s
commen
t
text
tag
self-closing
tag
14. DOM is a tree
Every node can only have
one parent, and every
node can have several
children, so the structure
looks like a tree.
16. Although there are lots of tags in the HTML specification, 99% of the webs use a
subset of HTML tags with less that 10 tags, the most important are:
● <div>: a container, usually represents a rectangular area with information inside.
● <img/>: an image
● <a>: a clickable link to go to another URL
● <p>: a text paragraph
● <h1>: a title (h2,h3,h4 are titles of less importance)
● <input>: a widget to let the user introduce information
● <style> and <link>: to insert CSS rules
● <script>: to execute Javascript
● <span>: a null tag (doesn't do anything), good for tagging info
HTML: main tags
17. HTML: other interesting tags
There are some tags that could be useful
sometimes:
● <button>: to create a button
● <audio>: for playing audio
● <video>: to play video
● <canvas>: to draw graphics from javascript
● <iframe>: to put another website inside ours
18. HTML: wrapping the info
We use HTML tags to wrap
different information on our site.
The more structure has the information,
the easier will be to access it and present
it.
We can change the way the information is
represented on the screen depending on
the tags where it is contained, so we
shouldn't be worried about using too
many tags.
19. HTML: tagging correctly
Try to avoid doing this:
<div
>
Titl
e
Here is some
content Here is
more content
</div>
Do this
instead
<div>
<h1>Title</h1>
<p>Here is content.</p>
<p>Here is more
content</p>
</div>
DONT DO THIS
20. HTML good use
It is good to have all the information properly wrapped in tags that give it some
semantics.
We also can extend the code semantics by adding extra attributes to the tags:
● id: tells a unique identifier for this tag
● class: tells a generic identifier for this tag
<div id="profile-picture" class="mini-image">...</div>
21. HTML references
HTML Reference: a description of all HTML tags.
The 25 Most used tags: a list with information of the more
common tags.
HTML5 Good practices: some tips for starters
23. CSS
CSS allows us to specify how to
present (render) the document info
stored in the HTML.
Thanks to CSS we can control all the
aspects of the visualization and some
other features:
● Colors: content, background,
borders
● Margins: interior margin,
exterior margin
● Position: where to put it
● Sizes: width, height
● Behaviour: changes on mouse
over
24. CSS example
* {
color: blue; /*a comment
*/ margin: 10px;
font: 14px Tahoma;
}
This will change all the tags in my web ( ‘*‘ means all) to look blue with font Tahoma
with 14px, and leaving a margin of 10px around.
25. CSS fields
Here is a list of the most common CSS fields and an example:
● color: #FF0000; red; rgba(255,00,100,1.0); //different ways to
specify colors
● background-color: red;
● background-image: url('file.png');
● font: 18px 'Tahoma';
● border: 2px solid black;
● border-top: 2px solid red;
● border-radius: 2px; //to remove corners and make them more round
● margin: 10px; //distance from the border to the outer elements
● padding: 2px; //distance from the border to the inner elements
● width: 100%; 300px; 1.3em; //many different ways to specify
distances
● height: 200px;
● text-align: center;
● box-shadow: 3px 3px 5px black;
● cursor: pointer;
● display: inline-block;
● overflow: hidden;
26. CSS how to add it
There are four ways to add CSS rules to your website:
● Inserting the code inside a style tag
<style>
p { color: blue }
</style>
● Referencing an external CSS file
<link href="style.css"
rel="stylesheet" />
● Using the attribute style on a tag
<p style="color: blue; margin: 10px">
● Using Javascript (we will see this one later).
27. CSS selectors
Let's start by changing the background color of one tag of our website:
div {
background-color: red;
}
This CSS rule means that every tag DIV found in our website should have a red
background color. Remember that DIVs are used mostly to represent areas of our
website.
We could also change the whole website background by affecting the tag body:
body {
background-color: red;
}
28. CSS selectors
What if we want to change one specific tag (not all the tags of the same type).
We can specify more precise selectors besides the name of the tag. For instance, by
class or id. To specify a tag with a given class name, we use the dot:
p.intro {
color: red;
}
This will affect only the tags p with class name intro:
<p class="intro">
29. CSS Selectors
There are several selectors we can use to narrow our rules to very specific tags of our
website.
The main selectors are:
● tag name: just the name of the tag
○ p { ... } //affects to all <p> tags
● dot (.): affects to tags with that class
○ p.highlight { ... } //affects all <p> tags with
class="highlight"
● sharp character (#): specifies tags with that id
○ p#intro { ... } //affects to the <p> tag with the id="intro"
● two dots (:): behaviour states (mouse on top)
○ p:hover { ... } //affects to <p> tags with the mouse over
● brackets ([attr='value']): tags with the attribute attr with the value 'value'
○ input[type="text"] {...} // affects to the input tags of the
type text
30. CSS Selectors
You can also specify tags by its context, for example: tags that are inside of tags
matching a selector. Just separate the selectors by an space:
div#main p.intro { ... }
This will affect to the p tags of class intro that are inside the tag div of id main
<div id="main">
<p class="intro">....</p> ← Affects this one
</div>
<p class="intro">....</p>← but not this one
31. CSS Selectors
And you can combine selectors to narrow it down more.
div#main.intro:hover { ... }
will apply the CSS to the any tag div with id main and class intro if the mouse is over.
And you do not need to specify a tag, you can use the class or id selectors without
tag, this means it will affect to any node of id main
#main { ... }
32. CSS Selectors
If you want to select only elements that are direct child of one element (not that
have an ancestor with that rule), use the > character:
ul.menu > li { ... }
Finally, if you want to use the same CSS actions to several selectors, you can use
the comma , character:
div, p { … } ← this will apply to all divs and p tags
33. HTML arrange
It is important to understand how the
browser arranges the elements on the
screen.
Check this tutorial where it explains the
different ways an element can be
arranged on the screen.
You can change the way elements
are arranged using the display
property:
div { display: inline-block;
}
34. Box Model
It is important to note that by default any
width and height specified to an element
will not take into account its margin, so a
div with width 100px and margin 10px will
measure 120px on the screen, not 100px.
This could be a problem breaking
your layout.
You can change this behaviour changing
the box model of the element so the
width uses the outmost border:
div { box-sizing: border; }
35. Layout
One of the hardest parts of CSS is
construing the layout of your website
(the structure inside the window) .
By default HTML tends to put
everything in one column, which is not
ideal.
There has been many proposals in CSS
to address this issue (tables, fixed divs,
flex, grid, …).
36. Flexbo
x
The first big proposal to address the
layout was the flexbox model.
This model allows to arrange stuff in
one direction (vertically or
horizontally) very easily.
You can even choose to arrange from
right to left (reverse).
It can also be used to arrange a series
of elements in different rows.
Check the tutorial for more
info.
HTML
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three
<br>first line
<br>second line
</div>
</div>
CSS
.box {
display: flex;
}
37. Grid
system
Because most sites are structured in a
grid, I recommend to use the CSS Grid
system.
We just assign how many rows/columns a div
should use from the main grid and it will
arrange automatically.
Check this tutorial to create the site
structure easily
HTML
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
</div>
CSS
.grid-container
{ display:
grid;
grid-template-
rows: 100px
100px;
grid-template-columns: 100px 100px
100px; grid-gap: 5px;
}
.grid-item1
{ background:
blue;
border: black 5px
solid;
grid-column-
start: 1;
38. Fullscreen
divs
Sometimes we want to have a div that
covers the whole screen (to make a
webapp), instead of a scrolling website
(more like regular documents).
In that case remember to use percentages
to define the size of elements, but keep in
mind that percentages are relative to the
element's parent size, so you must set the
size to the
<body> and <html> element to use 100%.
CSS
html, body {
width: 100%;
height: 100%;
}
div {
margin: 0;
padding: 0;
}
#main {
width: 100%;
height: 100%;
}
39. Trick to center
Centering divs can be hard sometimes, use this
trick:
.horizontal-and-vertical-
centering { display: flex;
justify-content: center;
align-items: center;
}
40. CSS further reading
There are many more rules for selectors.
Check some of the links to understand them
better. One line layouts tutorials
Understanding the Box Model: a good explanation of how to position the information
on your document.
All CSS Selectors: the CSS selectors specification
page. CSS Transition: how to make animations just
using CSS TailwindCSS: a CSS Framework
42. Interactivit
y
Once the web was already being
used they realize people wanted to
interact with the websites in a more
meaningful way.
So they added an Interpreter to
execute a script language that could
modify the content of the web
dynamically.
Brendan Eich was tasked to develop it
in one week and it has become one of
the most important languages.
43. Javascript
A regular programming language, easy to start,
hard to master.
Allows to give some interactivity to the elements on the
web.
Syntax similar to C or Java but with no
types.
You can change the content of the HTML or the CSS
applied to an element.
You can even send or retrieve information from the
internet to update the content of the web without
reloading the page.
var my_number = 10;
function say( str )
{
console.log( str );
}
say("hello");
44. Javascript: insert code
There is three ways to execute javascript code in a website:
● Embed the code in the HTML using the <script> tag.
<script> /* some code */ </script>
● Import a Javascript file using the <script> tag:
<script src="file.js" />
● Inject the code on an event inside a tag:
<button onclick="javascript: /*code*/">press
me</button>
45. Javascript: Syntax
Very similar to C++ or Java but much simpler.
var my_number = 10; //this is a
comment var my_string = "hello";
var my_array = [10,20,"name",true];
var my_object = { name: "javi",
city: "Barcelona" };
function say( str )
{
for(var i = 0; i < 10; ++i)
console.log(" say: " + str
);
46. Javascript example
<html>
<body>
<h1>This is a title</h1>
<script>
var title = document.querySelector("h1");
title.innerHTML = "This is another title";
</script>
</body>
</html>
47. Javascript API
Javascript comes with a rich API to do many things like:
● Access the DOM (HTML nodes)
● Do HTTP Requests
● Play videos and sounds
● Detect user actions (mouse move, key pressed)
● Launch Threads
● Access the GPU, get the Webcam image, ...
And the API keeps growing with every new update of the
standard. Check the WEB API reference to know more
48. Javascript: retrieving element
You can get elements from the DOM (HTML tree) using different
approaches.
● Crawling the HTML tree (starting from the body, and traversing its
children)
● Using a selector (like in CSS)
● Attaching events listeners (calling functions when some
actions are performed)
49. Javascript: crawling the DOM
From javascript you have different variables that you can access to
get information about the website:
● document: the DOM information (HTML)
● window: the browser window
The document variable allows to crawl the tree:
document.body.children[0] // returns the first node inside
body tag
50. Javascript: using selectors
You can retrieve elements using selectors:
var nodes = document.querySelectorAll("p.intro");
will return an array with all <p class="intro"> nodes in the
web. Or if we have already a node and we want to search inside:
var node = mynode.querySelectorAll("p.intro")
51. Javascript: modify nodes
From JS you can change the attributes
mynode.id = "intro"; //sets an id
mynode.className = "important"; //set
class
mynode.classList.add("good"); //to add
to the current classes
Change the content
mynode.innerHTML = "<p>text to
show</p>"; //change content
Modify the style (CSS)
mynode.style.color = "red"; //change
any css properties
or add the behaviour of a node
52. Javascript: create nodes
Create elements:
var element = document.createElement("div");
And attach them to the DOM:
document.querySelector("#main").appendChild( elemen
t );
Or remove it from its parent:
element.remove();
You can clone an element also easily:
var cloned = element.cloneNode(true);
53. Javascript: hide and show
elements
Sometimes it may be useful to hide one element or show another.
You can change an element CSS directly by accessing its property
style. To avoid being displayed on the web change display to "none"
element.style.display = "none"; //hides elements from being
rendered element.style.display = ""; //displays it again
54. Using Inputs
If you want the user to be able to input some text we use the tag
<input>:
<input type="text"/>
There are other inputs, you can check this list.
From Javascript we can attach events like "click" or
"keydown". To read or modify the content of the input:
my_input_element.value = ""; //this will clear the text
inside the input
55. Example of a
website
HTML in index.html
<link href="style.css" rel="stylesheet"/>
<h1>Welcome</h1>
<p>
<button>Click me</button>
</p>
<script src="code.js"/>
CSS in style.css
h1 { color: #333;
} button {
border: 2px solid
#AAA; background-
color: #555;
}
Javascript in code.js
//fetch the button from the DOM
var button = document.querySelector("button");
//attach and event when the user clicks
it button.addEventListener("click",
myfunction);
//create the function that will be called
when the button is pressed
function myfunction()
{
//this shows a popup
window alert("button
clicked!");
}
56. Execution flow
It is important to have a clear
understanding of the execution
flow of your code.
Scripts are executed when the html
is being parsed.
Be careful accessing the DOM as the
DOM won’t contain all until all the
HTML is parsed.
It is good practice to start your code
with an init function called at the end
of your HTML.
<script>
var main =
document.querySelector("#main");
//main here is null, as the element does
//exist yet
</script>
<div id="main"></div>
<script>
var main =
document.querySelector("#main");
//main now is the right element
</script>
57. Further info
API References: DevDocs.io
Selectors: MDN
Tutorial To learn
Javascript.
http://codeacademy.co
m
To learn jQuery: