Scribd
Upload
3 views

Introduction to HTML+CSS+Javascript

The document serves as an introduction to web technologies, focusing on HTML for document structure, CSS for visual styling, and JavaScript for interactivity. It outlines the necessary tools for web development, such as web browsers and text editors, and explains how to test code using a browser's developer tools. Additionally, it describes the anatomy of a browser, the purpose of HTML as a markup language, and the structure of the Document Object Model (DOM).

Uploaded by

vaishali.plahire
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

Introduction to HTML+CSS+Javascript

The document serves as an introduction to web technologies, focusing on HTML for document structure, CSS for visual styling, and JavaScript for interactivity. It outlines the necessary tools for web development, such as web browsers and text editors, and explains how to test code using a browser's developer tools. Additionally, it describes the anatomy of a browser, the purpose of HTML as a markup language, and the structure of the Document Object Model (DOM).

Uploaded by

vaishali.plahire
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Introduction to web

technologies
HTML + CSS + Javascript

Javi Agenjo (@tamat)


Goals
Introduction to web technologies:

● HTML to create the document


structure and content

● CSS to control is visual aspect

● Javascript for interactivity


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
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
Anatomy of a Browser
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.
Technologies

● HTML
● CSS
● Javascript
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.
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>
HTML
HTML means Hyper Text Markup Language.
<html>
The HTML allow us to define the structure of a document or a <head>
website. </head>
<body>
HTML is NOT a programming language, it’s a markup language,
<div>
which means its purpose is to give structure to the content of the
website, not to define an algorithm. <p>Hi</p>
</
It is a series of nested tags (it is a subset of XML: Extensible div>
Markup Language) that contain all the website information (like </body>
</html>
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: 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.
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>
HTML: syntax example
Tag name
attributes

<div id="main"> comment

<!-- this is a comment --> text tag


This is text without a tag.
<button class="mini">press me</button>
<img src="me.png" /> self-closing tag
</div>
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.

You might also like