the language of the web - html and css
TRANSCRIPT
The Language of the WebLearning to Code in HTML and CSS
Overview
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.
5
HTML: <p>I am a paragraph</p>
This is a paragraph tag.
CSS: p {color: blackfont-family: serif;font-size: 24;}
This is the element selector.
The Basics
The Basic Elements of HTML<!DOCTYPE html><html> <head><title> Learning to Code in HTML + CSS </title> </head> <body> <h1>Getting our Digital Black Belts</h1> <p>We are learning to code with HTML & CSS.</p> <p>By learning the language of the web, we can better serve our clients' needs.</p> </body> </html>
7
Tells the computer what language you're coding in.
This is the title of the Webpage.
This is a large headline.
This is a paragraph within the body.
What it will Look Like Online
8
Check it out! This is what our code would look like if we uploaded it to the web.
The Basic Elements of CSSbody {
background-color: #b7d1c4}
h2 {font-family: Verdana;font-weight: bold;text-align: center;padding-top: 25px;padding-bottom: 25px;color: #acd1b2;
}
img {height: 170px;width: 170px;box-shadow: rgba(0,0,0,0.2) 10px 10px;
}
9
Tells the HTML to make the background color of the body a sea green color. There are thousands of color codes available online to choose from, or you can create your own.
Tells the page how to format the header. There are commands for any type of formatting you can imagine from the font type to where the element should be placed on the page and beyond.
Tells the page what size to make the image.
What it Looks Like
10
Codecademy Overview
Codecademy
12
Speaking the Language
Key Definitions
14
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.
15
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.
16
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, {.
Becoming a Code Master
How to Learn the Language
18
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.
Codecademy
MIT’s Open Courseware
Stanford Online
HTML5 Rocks
Mozilla’s School of Webcraft
PeepCode
Google Code University
The Code Player
General Assembly
Various Books
Udacity
Coursera
UC Berkeley Webcast/Courses
Questions?
19
<!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>