intro to web coding


Hey! What is the Web? The Web is made up of 3
technologies that appeared in the nineties and
have constantly been changing since. “HyperText Markup
Language” or HTML which enables to structure a document
while defining in a semantic way what each part of the
content represents, like: titles, paragraphs, navigation bars or multimedia content. Here, a search field
a picture, buttons. The “Cascading Style Sheet”, or
CSS which enables to define the shaping of elements,
their color, their size, their typography or their margin. “JavaScript” or JS,
enables to add interaction, dynamism on a page,
to define the action when clicking a button, to question
a database or load some content dynamically. To show you their
use, we will take an online publisher: codepen.io. Start by creating
a free account. Then create a new pen. There are 3 sections,
dedicated to HTML, CSS and JS, which enable us to use each of these
languages in one and only web page. HTML is a tag language
that is written this way: symbol “”. A tag can contain signs that are written this way. A tag can contain
several signs, written one after the other. Or a tag can
also be what we call auto-closing,
when there is no content. You can find the complete
list of existing HTML tags on the Mozilla
Developer Network website. For example, to
create a title, we can use a tag “h1” for
Headings 1, a tag “h2” for a less important title, a tag “p”, for a normal Paragraph. Let’s take a content
which is already written to shape. By default, HTML can’t
read line breaks or line feeds. So we’ll use tags
for the shaping. A “h1” tag for the most
important title, a “h3” tag for a little less important
title, a “p” tag for Paragraph. For a list, we can
use a “ul” tag for an Unordered List and
each element of the list can be in a “li” tag
for List Item. So here we can see that an element
can contain a series of other elements. Inside a “p” tag,
we can put some of the text at the front
thanks to a “em” tag for Emphasized. Or do a line feed,
with a auto-closing “br” tag, for Break line. Thanks to the “a” tag
for Anchor, we can create hyperlinks. We use the “href” attribute
to define the link’s source. And here is a clickable link. And there’s a clickable link. Up to here, everything
we have done is the “body” of our page. Thanks to HTML, we can also insert
multimedia content like images with the
“img” tag, which is an auto-closing tag, it takes a “src” sign
for the source of our image. Here, I imagine
you are at this stage. HTML enables us to create
a static structure of our Web page. Now, let’s go to
the CSS for the shaping. The CSS works with
a selector system that enables to select one or
more elements in particular, to give them a
property and a value. We can select the Body
element by typing the name of this tag. The curly brackets
will enable to define a series of properties, for example
the property “background-color”. Or we can define an
image as background thanks to the “background-image” property. We can define the
color of the text and so on. We can select
a series of elements, by separating them with
commas and giving them properties in the same way. Here, the “front-family” property,
“sans serif”. For each element
there is a whole series of properties that
we can define, like for example changing the
size of a picture, or creating rounded corners, changing the typography… You can find all
these references on the Mozilla Developer Network web site. To end the style of our
page, we will add an HTML element. A division or “div”, is used
to gather a whole series of elements. Here, we are going to
take all the content of our page, except for the Body
tag, to create a column. And we are going to
style our “div” in CSS in order to give it a maximum width,
an automatic margin to center it, a “padding” which is the inner margin, so that all our
elements do not touch the edges of the column and a
projected shadow, to clearly delineate. From now on, with
the CSS, you should be approximately at this stage of comprehension. After HTML for the
structure and CSS for shaping let’s go to JavaScript, which is the programming language that
enables interactions in a Web page. Like for example,
displaying a “popup”. It also enables
to store elements in a computer’s
memory, like a new date. We can use this
date to create a bit of dynamism in our page,
for example, by selecting our Heading 3 element:
document.querySelector(‘h3’) We can set
its text content and add the date to
its text content. For a better
understanding of JavaScript, you can go on
Mozilla Developer Network web site. As we saw, you
can modify the content of an element with
JavaScript in a dynamic way, so you should you should approximately
be at this level of comprehension. So, we have seen HTLM,
CSS and JavaScript which are the basics of Web content. You are now ready
to create your own pages!

Add a Comment

Your email address will not be published. Required fields are marked *