The Language of the Web - HTML and CSS

The Language of the Web
Learning to Code in HTML and CSS

The Language of the Web

HTML is the language of the web and in an industry
where we pride ourselves on being smarter and
faster, it is becoming more and more important that
we all have a basic understanding of how to speak it
and how to use it.

3

Defining HTML and CSS?

HTML: HyperText Markup Language (HTML) is the
main markup language for creating web pages and
other information that can be displayed in a web
browser.

CSS: Cascading Style Sheets (CSS) is a style sheet
language used for describing the presentation
semantics (the look and formatting) of a document
written in a markup language.

4

Can I get a Translator?
In simple terms, HTML tells the webpage what each
element is by using identifying tags and CSS tells the
element what to look like.
CSS:
HTML:
p{
<p>I am a paragraph</p>
color: black
font-family: serif;
This is a paragraph tag. font-size: 24;
}

This is the element selector.

5

The Basic Elements of HTML
Tells the computer
what language
<!DOCTYPE html>
you're coding in. <html>
<head>
This is the title of <title>
the Webpage. Learning to Code in HTML + CSS
</title>
</head>
<body>
This is a large headline. <h1>Getting our Digital Black Belts</h1>
<p>We are learning to code with HTML & CSS.</p>
This is a paragraph within
the body.
<p>By learning the language of the web, we can
better serve our clients' needs.</p>
</body>
</html>

7

What it will Look Like Online

Check it out! This is what our
code would look like if we
uploaded it to the web.

8

The Basic Elements of CSS
Tells the HTML to make the
body { background color of the body a
background-color: #b7d1c4 sea green color. There are
} thousands of color codes
available online to choose
from, or you can create your
h2 { own.
font-family: Verdana;
font-weight: bold; Tells the page how to format
text-align: center; the header. There are
commands for any type of
padding-top: 25px;
formatting you can imagine
padding-bottom: 25px; from the font type to where
color: #acd1b2; the element should be placed
} on the page and beyond.

img {
height: 170px; Tells the page what size to
width: 170px; make the image.
box-shadow: rgba(0,0,0,0.2) 10px 10px;
}

9

What it Looks Like

10

Key Definitions
Okay, now that you're walking the walk, let's go over how we can talk the talk. Here are some
common web phrases that you should learn if you want to sound like a tech guru. Bonus points
if you can use any of these in a sentence today.

JavaScript - a coding language that makes websites interactive. This language will allow you to
ask users to input information, move elements around on the page, and make your website
more functional overall.

jQuery - a way to create interactive websites. You can move HTML elements around, create
custom animations, and let your users affect your site with a simple mouse click.

Python - a powerful, flexible programming language you can use in web/internet
development, to write desktop graphical user interfaces (GUIs), create games, and much more.

APIs - Application Programming Interface lets you connect your app to the world. You can write
code that can do almost anything like read Tweets, make phone calls, and track clicks on your
site's links.

14

Web Crawler - An application used to read through the content of a Web site automatically i.e.
Google, Yahoo!, Bing.

Wireframe - A simple graphical layout guide with filler text and little or no color and images.
Its purpose is to show the allocated space and location for each structural page element, such
as the toolbar, logo, tag line, ads, content and images, as well as the calculated visitor
movement within the Web site through call to actions.

Meta Data - Data that describes other data and inserted into documents to describe different
aspects the page such as what language it is written in, what tools were used to create it, and
where to go for more on the subject, allowing browsers to automatically improve the
experience of users.

Plug-In - a plug-in (or plugin) is a set of software components that adds specific abilities to a
larger software application. Examples include Adobe Flash Player, QuickTime, and Java
Applets.

Flash - A program used to combine graphics, video and text to enhance elements of a website.
Often used to produce animation, interactive user environments, forms, slide shows, menus
and more.

15

Elements - Elements are designators that define objects within a page, including structure and
content. Some of the more popular elements include h1 through h6, p, a, div, span, strong, and
em.

Tags - Elements are often made of multiple sets of tags, identified as opening and closing tags.
Opening tags mark the beginning of an element, such as <div>. Closing tags mark the end of an
element and begin with a forward slash, such as </div>.

Attributes - Attributes are properties used to provide additional instruction to given elements.
More commonly, attributes are used to assign an id, class, or title to an element, to give media
elements a source (src), or to provide a hyperlink reference (href).

Selectors - A selector determines exactly which element, or elements, the corresponding styles
will be applied. Selectors can include a combination of different IDs, classes, types, and other
attributes – all depending on how specific you wish to be. Selectors can be identified as
everything that comes before the first curly brace, {.

16

How to Learn the Language
I bet you're wondering how you can become a code master. It takes most people many
years of learning and experience to master the complex world of HTML and CSS, but
fortunately there are many simple and free outlets available that you can use to gain a
basic understanding and workable knowledge of these and many other computer
languages.
Udacity UC Berkeley Webcast/Courses
Codecademy

MIT’s Open Courseware
Google Code University HTML5 Rocks

Stanford Online
Coursera
Mozilla’s School of Webcraft

Various Books The Code Player
General Assembly PeepCode

18

Questions?
<!DOCTYPE html>
<html>
<head>
<title>
The End
</title>
</head>
<body>
<h1>Questions?</h1>
<p>Learning code can be fun! If you have any questions on
anything I covered or want more info on how you can learn
HTML + CSS, feel free to send me an email.</p>
</body>
</html>

19

The Language of the Web - HTML and CSS

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à The Language of the Web - HTML and CSS

Similaire à The Language of the Web - HTML and CSS (20)

The Language of the Web - HTML and CSS

Notes de l'éditeur