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 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.
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, 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.
Web Designing Training in Ambala ! BATRA COMPUTER CENTREjatin batra
Are you in search of Web Designing training in Ambala?
Now your search ends here... Batra Computer Centre provides you the best training in Ambala Cantt. We provide training in Basics of Computers, training in Programming Languages C, C++, HTML, PHP,Web Designing,WebDevelopment,Seo,Smo and training many other courses also provided here.
The document summarizes an upcoming presentation on HTML5 and PHP. It lists the group members and covers the following topics in the presentation agenda: HTML5 elements like Canvas, SVG, drag/drop, geo-location, video, audio; PHP syntax, variables, and strings; and differences between SVG and Canvas. It provides code examples and explanations for several HTML5 elements and features including Canvas, SVG, drag/drop, geo-location, video, audio, and form handling.
This document summarizes Deepika Yadav's presentation on Dynamic Hypertext Markup Language (DHTML). The presentation covers the definition of DHTML, its need and components, an overview of DHTML, advantages and disadvantages of DHTML, Cascading Style Sheets (CSS), the Document Object Model (DOM), HTML and scripting access, and creating rollover buttons with DHTML. Deepika Yadav, a BSc computer science student, delivered the presentation which was guided by Mr. C.L. Malviya and Mr. Sanjay Shinde.
HyperText Markup Language (HTML) is a markup language used to define the structure and layout of web pages. It uses tags to annotate content with instructions on how it should be displayed. Some common HTML tags provide meaning or formatting to text, include images and links, and structure content into paragraphs, lists, tables and forms. HTML has evolved over time, with newer versions like HTML5 adding additional tags and capabilities.
The document provides an introduction and overview of HTML, CSS, JavaScript, and how the web works. It discusses the difference between static and dynamic webpages. Key points include:
- The World Wide Web consists of clients and servers connected over the internet that communicate using HTTP. Webpages, images, and files are requested and returned between clients and servers.
- HTML is used to define the structure and content of a webpage. CSS is used for presentation and styling. JavaScript adds interactivity.
- Static webpages only provide information with no user interaction, while dynamic webpages use server-side scripts like PHP to interact with users.
- The document gives examples of HTML tags, CSS stylesheets
This document provides an overview of HTML 5 and related technologies. It begins with introductions to HTML, forms, and common elements. It then covers new features in HTML5 like semantic elements, audio and video embedding, and drag and drop capabilities. The document also discusses technologies like CSS and JavaScript that can enhance HTML pages. It provides syntax and code examples for various HTML elements, tags, attributes and how to integrate multimedia, APIs and styling to create dynamic and interactive web pages.
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.
GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSSudaymore742
🚀 3-Day Web Development Workshop (5th-7th, 6:00-8:00 PM)
🔍 Day 1: HTML 🧱 + CSS 🎨 (Mayuresh & Tanuja)
💻 Day 2: JavaScript ⚙ + DOM 🛠 (Ved & Srushti)
🌐 Day 3: MERN Stack 🌱 (Mohit)
✨ Why Join? Hands-on learning, expert mentors, portfolio-ready project, and completion certificate!
🎯 For beginners, students, and web dev enthusiasts.
Markup language classification, designing static and dynamicAnkita Bhalla
The document discusses various markup languages used to create static and dynamic web pages. It describes how static pages are fixed and do not change, while dynamic pages can be modified at runtime through scripts. It provides details on HTML, CSS, JavaScript and server-side scripts for creating dynamic content. Key topics covered include using tags like <div> for layouts, <img> for images, and JavaScript for basic interactivity. The document compares the processing of static versus dynamic pages and outlines benefits of dynamic pages like personalization and database access.
This document provides an overview of web development technologies including HTML, CSS, Bootstrap, SQL, and PHP. It begins with introductions to web development, HTML, and CSS. It then covers Bootstrap frameworks, SQL for databases, and PHP for server-side scripting. Examples of code are provided for each. The document concludes with a thank you slide.
The document provides an introduction to HTML and explains various HTML tags and concepts. It defines HTML as a markup language used to create web pages and describes common tags such as <html>, <head>, <body>, <p>, <b>, <i>, <font>, <hr>, and heading tags <h1>-<h6>. It also covers inserting images, hyperlinks, and lists in HTML documents. The document is intended as an introductory guide for learning basic HTML syntax and features.
The document provides an introduction to HTML and describes various HTML tags and concepts. It explains that HTML is used to create documents for display on the web and describes some key HTML tags such as <html>, <head>, <title>, <body> and others. It also discusses formatting text using tags like <b>, <i>, <font>, character styles, paragraphs, headings and more. The document serves as a tutorial for basic HTML elements and page structure.
This document provides an introduction to HTML and summarizes its key elements:
- HTML is a markup language used to create web pages and is made up of tags that describe different elements like headings, paragraphs, and tables.
- The basic structure of an HTML document includes <html>, <head>, and <body> tags. The <head> contains the title and <body> holds the visible page content.
- Common text formatting tags in HTML are used to change font styles, colors, and sizes. These include <b>, <i>, <u>, and <font>.
Third Review PPT that consists of the project d etails like abstract.Sowndarya6
CyberShieldX is an AI-driven cybersecurity SaaS web application designed to provide automated security analysis and proactive threat mitigation for business websites. As cyber threats continue to evolve, traditional security tools like OpenVAS and Nessus require manual configurations and lack real-time automation. CyberShieldX addresses these limitations by integrating AI-powered vulnerability assessment, intrusion detection, and security maintenance services. Users can analyze their websites by simply submitting a URL, after which CyberShieldX conducts an in-depth vulnerability scan using advanced security tools such as OpenVAS, Nessus, and Metasploit. The system then generates a detailed report highlighting security risks, potential exploits, and recommended fixes. Premium users receive continuous security monitoring, automatic patching, and expert assistance to fortify their digital infrastructure against emerging threats. Built on a robust cloud infrastructure using AWS, Docker, and Kubernetes, CyberShieldX ensures scalability, high availability, and efficient security enforcement. Its AI-driven approach enhances detection accuracy, minimizes false positives, and provides real-time security insights. This project will cover the system's architecture, implementation, and its advantages over existing security solutions, demonstrating how CyberShieldX revolutionizes cybersecurity by offering businesses a smarter, automated, and proactive defense mechanism against ever-evolving cyber threats.
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.
More Related Content
Similar to Introduction to HTML+CSS+Javascript.pptx (20)
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.
Web Designing Training in Ambala ! BATRA COMPUTER CENTREjatin batra
Are you in search of Web Designing training in Ambala?
Now your search ends here... Batra Computer Centre provides you the best training in Ambala Cantt. We provide training in Basics of Computers, training in Programming Languages C, C++, HTML, PHP,Web Designing,WebDevelopment,Seo,Smo and training many other courses also provided here.
The document summarizes an upcoming presentation on HTML5 and PHP. It lists the group members and covers the following topics in the presentation agenda: HTML5 elements like Canvas, SVG, drag/drop, geo-location, video, audio; PHP syntax, variables, and strings; and differences between SVG and Canvas. It provides code examples and explanations for several HTML5 elements and features including Canvas, SVG, drag/drop, geo-location, video, audio, and form handling.
This document summarizes Deepika Yadav's presentation on Dynamic Hypertext Markup Language (DHTML). The presentation covers the definition of DHTML, its need and components, an overview of DHTML, advantages and disadvantages of DHTML, Cascading Style Sheets (CSS), the Document Object Model (DOM), HTML and scripting access, and creating rollover buttons with DHTML. Deepika Yadav, a BSc computer science student, delivered the presentation which was guided by Mr. C.L. Malviya and Mr. Sanjay Shinde.
HyperText Markup Language (HTML) is a markup language used to define the structure and layout of web pages. It uses tags to annotate content with instructions on how it should be displayed. Some common HTML tags provide meaning or formatting to text, include images and links, and structure content into paragraphs, lists, tables and forms. HTML has evolved over time, with newer versions like HTML5 adding additional tags and capabilities.
The document provides an introduction and overview of HTML, CSS, JavaScript, and how the web works. It discusses the difference between static and dynamic webpages. Key points include:
- The World Wide Web consists of clients and servers connected over the internet that communicate using HTTP. Webpages, images, and files are requested and returned between clients and servers.
- HTML is used to define the structure and content of a webpage. CSS is used for presentation and styling. JavaScript adds interactivity.
- Static webpages only provide information with no user interaction, while dynamic webpages use server-side scripts like PHP to interact with users.
- The document gives examples of HTML tags, CSS stylesheets
This document provides an overview of HTML 5 and related technologies. It begins with introductions to HTML, forms, and common elements. It then covers new features in HTML5 like semantic elements, audio and video embedding, and drag and drop capabilities. The document also discusses technologies like CSS and JavaScript that can enhance HTML pages. It provides syntax and code examples for various HTML elements, tags, attributes and how to integrate multimedia, APIs and styling to create dynamic and interactive web pages.
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.
GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSSudaymore742
🚀 3-Day Web Development Workshop (5th-7th, 6:00-8:00 PM)
🔍 Day 1: HTML 🧱 + CSS 🎨 (Mayuresh & Tanuja)
💻 Day 2: JavaScript ⚙ + DOM 🛠 (Ved & Srushti)
🌐 Day 3: MERN Stack 🌱 (Mohit)
✨ Why Join? Hands-on learning, expert mentors, portfolio-ready project, and completion certificate!
🎯 For beginners, students, and web dev enthusiasts.
Markup language classification, designing static and dynamicAnkita Bhalla
The document discusses various markup languages used to create static and dynamic web pages. It describes how static pages are fixed and do not change, while dynamic pages can be modified at runtime through scripts. It provides details on HTML, CSS, JavaScript and server-side scripts for creating dynamic content. Key topics covered include using tags like <div> for layouts, <img> for images, and JavaScript for basic interactivity. The document compares the processing of static versus dynamic pages and outlines benefits of dynamic pages like personalization and database access.
This document provides an overview of web development technologies including HTML, CSS, Bootstrap, SQL, and PHP. It begins with introductions to web development, HTML, and CSS. It then covers Bootstrap frameworks, SQL for databases, and PHP for server-side scripting. Examples of code are provided for each. The document concludes with a thank you slide.
The document provides an introduction to HTML and explains various HTML tags and concepts. It defines HTML as a markup language used to create web pages and describes common tags such as <html>, <head>, <body>, <p>, <b>, <i>, <font>, <hr>, and heading tags <h1>-<h6>. It also covers inserting images, hyperlinks, and lists in HTML documents. The document is intended as an introductory guide for learning basic HTML syntax and features.
The document provides an introduction to HTML and describes various HTML tags and concepts. It explains that HTML is used to create documents for display on the web and describes some key HTML tags such as <html>, <head>, <title>, <body> and others. It also discusses formatting text using tags like <b>, <i>, <font>, character styles, paragraphs, headings and more. The document serves as a tutorial for basic HTML elements and page structure.
This document provides an introduction to HTML and summarizes its key elements:
- HTML is a markup language used to create web pages and is made up of tags that describe different elements like headings, paragraphs, and tables.
- The basic structure of an HTML document includes <html>, <head>, and <body> tags. The <head> contains the title and <body> holds the visible page content.
- Common text formatting tags in HTML are used to change font styles, colors, and sizes. These include <b>, <i>, <u>, and <font>.
Third Review PPT that consists of the project d etails like abstract.Sowndarya6
CyberShieldX is an AI-driven cybersecurity SaaS web application designed to provide automated security analysis and proactive threat mitigation for business websites. As cyber threats continue to evolve, traditional security tools like OpenVAS and Nessus require manual configurations and lack real-time automation. CyberShieldX addresses these limitations by integrating AI-powered vulnerability assessment, intrusion detection, and security maintenance services. Users can analyze their websites by simply submitting a URL, after which CyberShieldX conducts an in-depth vulnerability scan using advanced security tools such as OpenVAS, Nessus, and Metasploit. The system then generates a detailed report highlighting security risks, potential exploits, and recommended fixes. Premium users receive continuous security monitoring, automatic patching, and expert assistance to fortify their digital infrastructure against emerging threats. Built on a robust cloud infrastructure using AWS, Docker, and Kubernetes, CyberShieldX ensures scalability, high availability, and efficient security enforcement. Its AI-driven approach enhances detection accuracy, minimizes false positives, and provides real-time security insights. This project will cover the system's architecture, implementation, and its advantages over existing security solutions, demonstrating how CyberShieldX revolutionizes cybersecurity by offering businesses a smarter, automated, and proactive defense mechanism against ever-evolving cyber threats.
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.
May 2025: Top 10 Read Articles Advanced Information Technologyijait
International journal of advanced Information technology (IJAIT) is a bi monthly open access peer-reviewed journal, will act as a major forum for the presentation of innovative ideas, approaches, developments, and research projects in the area advanced information technology applications and services. It will also serve to facilitate the exchange of information between researchers and industry professionals to discuss the latest issues and advancement in the area of advanced IT. Core areas of advanced IT and multi-disciplinary and its applications will be covered during the conferences.
International Journal of Advance Robotics & Expert Systems (JARES)jaresjournal868
Call For Papers!!!
International Journal of Advance Robotics & Expert Systems (JARES)
Web page Link: http://airccse.com/jares/index.html
Submission Deadline :June17, 2025
submission Link: http://airccse.com/submission/home.html
Contact Us : jaresjournal@yahoo.com or eicjares@airccse.com or jares@aircconline.com
Electrical and Electronics Engineering: An International Journal (ELELIJ)elelijjournal653
Call For Papers...!!!
Electrical and Electronics Engineering: An International Journal (ELELIJ)
Web page link: https://wireilla.com/engg/eeeij/index.html
Submission Deadline: June 08, 2025
Submission link: elelijjournal@wireilla.com
Contact Us: wirelinux@wireilla.org
This study will provide the audience with an understanding of the capabilities of soft tools such as Artificial Neural Networks (ANN), Support Vector Regression (SVR), Model Trees (MT), and Multi-Gene Genetic Programming (MGGP) as a statistical downscaling tool. Many projects are underway around the world to downscale the data from Global Climate Models (GCM). The majority of the statistical tools have a lengthy downscaling pipeline to follow. To improve its accuracy, the GCM data is re-gridded according to the grid points of the observed data, standardized, and, sometimes, bias-removal is required. The current work suggests that future precipitation can be predicted by using precipitation data from the nearest four grid points as input to soft tools and observed precipitation as output. This research aims to estimate precipitation trends in the near future (2021-2050), using 5 GCMs, for Pune, in the state of Maharashtra, India. The findings indicate that each one of the soft tools can model the precipitation with excellent accuracy as compared to the traditional method of Distribution Based Scaling (DBS). The results show that ANN models appear to give the best results, followed by MT, then MGGP, and finally SVR. This work is one of a kind in that it provides insights into the changing monsoon season in Pune. The anticipated average precipitation levels depict a rise of 300–500% in January, along with increases of 200-300% in February and March, and a 100-150% increase for April and December. In contrast, rainfall appears to be decreasing by 20-30% between June and September.
Call For Papers - International Journal on Natural Language Computing (IJNLC)kevig
Natural Language Processing is a programmed approach to analyze text that is based on both a
set of theories and a set of technologies. This forum aims to bring together researchers who have
designed and build software that will analyze, understand, and generate languages that humans use
naturally to address computers.
A SEW-EURODRIVE brake repair kit is needed for maintenance and repair of specific SEW-EURODRIVE brake models, like the BE series. It includes all necessary parts for preventative maintenance and repairs. This ensures proper brake functionality and extends the lifespan of the brake system
本資料「To CoT or not to CoT?」では、大規模言語モデルにおけるChain of Thought(CoT)プロンプトの効果について詳しく解説しています。
CoTはあらゆるタスクに効く万能な手法ではなく、特に数学的・論理的・アルゴリズム的な推論を伴う課題で高い効果を発揮することが実験から示されています。
一方で、常識や一般知識を問う問題に対しては効果が限定的であることも明らかになりました。
複雑な問題を段階的に分解・実行する「計画と実行」のプロセスにおいて、CoTの強みが活かされる点も注目ポイントです。
This presentation explores when Chain of Thought (CoT) prompting is truly effective in large language models.
The findings show that CoT significantly improves performance on tasks involving mathematical or logical reasoning, while its impact is limited on general knowledge or commonsense tasks.
The development of smart cities holds immense significance in shaping a nation's urban fabric and effectively addressing urban challenges that profoundly impact the economy. Among these challenges, road accidents pose a significant obstacle to urban progress, affecting lives, supply chain efficiency, and socioeconomic well-being. To address this issue effectively, accurate forecasting of road accidents is crucial for policy formulation and enhancing safety measures. Time series forecasting of road accidents provides invaluable insights for devising strategies, enabling swift actions in the short term to reduce accident rates, and informing well-informed road design and safety management policies for the long term, including the implementation of flyovers, and the enhancement of road quality to withstand all weather conditions. Deep Learning's exceptional pattern recognition capabilities have made it a favored approach for accident forecasting. The study comprehensively evaluates deep learning models, such as RNN, LSTM, CNN+LSTM, GRU, Transformer, and MLP, using a ten-year dataset from the esteemed Smart Road Accident Database in Hubballi-Dharwad. The findings unequivocally underscore LSTM's superiority, exhibiting lower errors in both yearly (RMSE: 0.291, MAE: 0.271, MAPE: 6.674%) and monthly (RMSE: 0.186, MAE: 0.176, MAPE: 5.850%) variations. Based on these compelling findings, the study provides strategic recommendations to urban development authorities, emphasizing comprehensive policy frameworks encompassing short-term and long-term measures to reduce accident rates alongside meticulous safety measures and infrastructure planning. By leveraging insights from deep learning models, urban development authorities can adeptly shape the urban landscape, fostering safer environments and contributing to global safety and prosperity.
Impurities of Water and their Significance.pptxdhanashree78
Impart Taste, Odour, Colour, and Turbidity to water.
Presence of organic matter or industrial wastes or microorganisms (algae) imparts taste and odour to water.
Presence of suspended and colloidal matter imparts turbidity to water.
2. Introduction
When you decide to develop an application using any
programming language, one of the first problem you
face is that programming languages do not include a
library to create User Interfaces.
You need to use some framework to access the OS
layer. Every programming language has at least one,
but you need to choose it first.
Your Code
Framework
Operative System
Hardware
3. Framework and OS
What you expect from your framework to
access the OS is usually three things:
- To display information in the screen
- To get the user input
- To request data from the internet.
- To play audio
- To store data
- To get system info like date, screen
resolution, etc.
Every programming language has its own
set of libraries to fulfill all these tasks but
sometimes it can get annoying to set up
all of them.
Your Code
Input Network
Display
Audio Storage
System
info
4. The Web Framework
One of the nice things about developing
for the web is that the web provides a
very rich and simple framework to create
applications that include lots of features,
not only interface but also access to
peripherals (audio, input, gamepads,
etc), and this API is very easy to use.
And because this API is universal, it
means that it works in every browser of
every platform.
Your Code (Javascript)
Input Network
Display
Audio Storage
System
info
Browser
5. Goals
Introduction to web technologies:
● HTML to create the document
structure and content
● CSS to control is visual aspect
● Javascript for interactivity
6. 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
7. 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
9. 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.
11. 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.
12. 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>
13. 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>
14. 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.
15. 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>
16. 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
attributes
comment
text tag
self-closing tag
17. 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.
19. 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
20. 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
21. 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.
22. HTML: tagging correctly
Try to avoid doing this:
<div>
Title
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
23. 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>
24. 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
26. 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
27. 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.
28. 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;
29. 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).
30. 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;
}
31. 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">
32. 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
33. 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
34. 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 { ... }
35. 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
36. 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; }
Also check the property float.
37. 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; }
38. 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, …).
39. Flexbox
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;
}
40. 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;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
}
41. 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%;
}
43. 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
45. Interactivity
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.
46. 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");
47. 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>
48. 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 );
}
49. 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>
50. 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
51. 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)
52. 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
53. 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")
54. 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
mynode.addEventListener("click", function(e) {
//do something
});
55. Javascript: create nodes
Create elements:
var element = document.createElement("div");
And attach them to the DOM:
document.querySelector("#main").appendChild( element );
Or remove it from its parent:
element.remove();
You can clone an element also easily:
var cloned = element.cloneNode(true);
56. 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
57. 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
58. 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!");
}
59. 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>
60. jQuery
jQuery is a library that makes working with the DOM much easier, using an unified
syntax and taking advantage of selectors:
$("p").remove(); //remove all tags p
$("#main").hide(); //hides the element of id main
$("#main").append("<h1>titulo</h1>") //adds content to an element
$("#wrap").css({ color: "red" }); //change the css
$("button#send").click( function() { /* code */ });
To include this library just add this to your HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
61. Using the Dev Tools
Press Control + Shift + I (or F12) to open DevTools
62. Exercise
Create the layout for a
messaging application.
Structured like:
● Main container
○ Messages area
■ message
○ Typing area area
■ input
63. Further info
API References: DevDocs.io
Selectors: MDN Tutorial
To learn Javascript.
http://codeacademy.com
To learn jQuery:
http://docs.jquery.com/Tutorials