Introduction to HTML

Loading...

En provenance du cours de New York University Tandon School of Engineering

Information Visualization: Programming with D3.js

36 notes

New York University Tandon School of Engineering

Information Visualization: Programming with D3.js

36 notes

Cours 3 sur 4 dans Specialization Information Visualization

In this course you will learn how to use D3.js to create powerful visualizations for web. Learning D3.js will enable you to create many different types of visualization and to visualize many different data types. It will give you the freedom to create something as simple as a bar chart as well your own new revolutionary technique. In this course we will cover the basics of creating visualizations with D3 as well as how to deal with tabular data, geography and networks. By the end of this course you will be able to: - Create bar and line charts - Create choropleth and symbol maps - Create node-link diagrams and tree maps - Implement zooming and brushing - Link two or more views through interaction The course mixes theoretical and practical lectures. We will show you step by step how to use the library to build actual visualizations and what theoretical concepts lie behind them. Throughout the course you will learn skills that will lead you to building a whole application by the end of the lectures (a fully working visualization system to visualize airlines routes). This course is the third one of the “Specialization in Information Visualization". The course expects you to have some basic knowledge of programming as well as some basic visualization skills.

À partir de la leçon

Introduction to web and d3

In this module we will focus on the basics of web development and d3.js

Introduction to HTML4:21

Practice: Introduction to HTML7:12

Introduction to CSS4:16

Practice: Introduction to CSS8:46

Introduction to Javascript8:08

Javascript - Control Structures4:54

Practice: Introduction to Javascript9:09

Practice: Javascript - Control Structures5:58

Rencontrer les enseignants

Enrico Bertini
Associate Professor
Computer Science and Engineering
Cristian Felix
PhD. Candidate
Computer Science and Engineering

In this video, I want to give you an introduction to HTML.

HTML is the language that we use to create a structure to a page.

We are basically trying to tell what things are.

We have different languages on the web platform.

We have, for example, CSS for a style.

We have JavaScript for interaction and changing,

adding changes to the page.

But HTML is the core,

is the one that builds the structure in which

those two other languages going to work later. How does it work?

So, take, for example, this page,

when you look to a page like that,

you have different elements on this page.

So, for example, we have a title,

we also have a paragraph,

and we have buttons.

So, HTML is the language that we're going to use to tell what each of those elements are.

How we do that, we do that using HTML tags.

A tag is basically,

we start with your content,

that is where I want to add the information,

and I add an opening tag by using the signs of less than and greater than.

In the center, I have the name of the tag.

I close this tag using almost the same syntax but adding a slash at the end of the tag.

That is a shortcut in case your tag doesn't have any content.

In this case, we can just use the tag name with a slash at the end.

Imagine that I have this paragraph,

and now I want to tag to let the system know that this is a paragraph.

We can add the tag p,

that is the standard tag for paragraphs in the beginning,

and we can close it at the end.

One important thing to take in consideration is

that the content itself can be another tag.

So, for example, imagine that now this is my content,

and I can add one tag before seeing

section to the final section of a page, and I can close.

So I can create a hierarchy of tags,

and I can add as many tags as I want inside each of those sections.

What is the reason why we want to make sure

that the system understand what is each element?

So, first, because search engines is going to use

this information to understand your page and then when someone searching on the web,

they can use that to rank you page up and down.

Second, if you have someone that needs accessibility,

for example, a blind person,

to access your page,

the system will be able to understand and read parts of the page to this person as well.

Each tag can also have attributes.

Attributes is how we give information to the tag.

So we have the tag name.

We just add a new attribute,

equal, and the value between quotes.

For example, here I have the tag img that is used to add an image to a page,

and we have the attribute src with the address on which image I want to display there.

So, let's take a look on how an HTML structure is going to look like.

So, we start with what we call DOCTYPE declaration.

So, this is basically telling the system that this is an HTML page,

and it's a special tag.

So that's the reason why we won't close it, is going to keep open.

Then we have the HTML tag that basically define the beginning and the end of my page.

Inside HTML, we can add the body tag

that is basically the content that you see when you access a page.

So, for example, here I have a header and I have a paragraph.

You can see those showing here on my screen,

also I have this in my HTML.

Finally, we have another special type called head.

Head is what add metadata information to your page.

So, for example, here I am adding information that's called title,

and is defining the title that is going to show in

the user browser once the user access my page.

So, keep in mind that HTML defines the structure.

You don't try to define how things look like,

but what they are.

We have different language to define the appearance and the style of the page.

It's important to make sure that you use the most semantic tag for your text.

So, for example, if I have a paragraph,

you want to use a tag for a paragraph,

so the system can know how to read your page better.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play