The Language of the WebLearning to Code in HTML and CSS
Overview
The Language of the WebHTML is the language of the web and in an industrywhere we pride ourselves on being smarter andfast...
Defining HTML and CSS?HTML: HyperText Markup Language (HTML) is themain markup language for creating web pages andother in...
Can I get a Translator?In simple terms, HTML tells the webpage what eachelement is by using identifying tags and CSS tells...
The Basics
The Basic Elements of HTMLTells the computerwhat language                                 <!DOCTYPE html>youre coding in. ...
What it will Look Like Online                  Check it out! This is what our                  code would look like if we ...
The Basic Elements of CSS                                                    Tells the HTML to make thebody {             ...
What it Looks Like                     10
Codecademy Overview
Codecademy             12
Speaking the Language
Key DefinitionsOkay, now that youre walking the walk, lets go over how we can talk the talk. Here are somecommon web phras...
Web Crawler - An application used to read through the content of a Web site automatically i.e.Google, Yahoo!, Bing.Wirefra...
Elements - Elements are designators that define objects within a page, including structure andcontent. Some of the more po...
Becoming a Code Master
How to Learn the Language   I bet youre wondering how you can become a code master. It takes most people many   years of l...
Questions?<!DOCTYPE html>  <html>    <head>          <title>            The End          </title>   </head>   <body>      ...
Upcoming SlideShare
Loading in …5
×

The Language of the Web - HTML and CSS

415 views
272 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
415
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • October - AprilGenerate awareness for TakeMeFishing, Increase brand visibility during the core fishing and boating season (and beyond), and
  • October - AprilGenerate awareness for TakeMeFishing, Increase brand visibility during the core fishing and boating season (and beyond), and
  • October - AprilGenerate awareness for TakeMeFishing, Increase brand visibility during the core fishing and boating season (and beyond), and
  • October - AprilGenerate awareness for TakeMeFishing, Increase brand visibility during the core fishing and boating season (and beyond), and
  • October - AprilGenerate awareness for TakeMeFishing, Increase brand visibility during the core fishing and boating season (and beyond), and
  • October - AprilGenerate awareness for TakeMeFishing, Increase brand visibility during the core fishing and boating season (and beyond), and
  • October - AprilGenerate awareness for TakeMeFishing, Increase brand visibility during the core fishing and boating season (and beyond), and
  • October - AprilGenerate awareness for TakeMeFishing, Increase brand visibility during the core fishing and boating season (and beyond), and
  • October - AprilGenerate awareness for TakeMeFishing, Increase brand visibility during the core fishing and boating season (and beyond), and
  • October - AprilGenerate awareness for TakeMeFishing, Increase brand visibility during the core fishing and boating season (and beyond), and
  • October - AprilGenerate awareness for TakeMeFishing, Increase brand visibility during the core fishing and boating season (and beyond), and
  • October - AprilGenerate awareness for TakeMeFishing, Increase brand visibility during the core fishing and boating season (and beyond), and
  • October - AprilGenerate awareness for TakeMeFishing, Increase brand visibility during the core fishing and boating season (and beyond), and
  • The Language of the Web - HTML and CSS

    1. 1. The Language of the WebLearning to Code in HTML and CSS
    2. 2. Overview
    3. 3. The Language of the WebHTML is the language of the web and in an industrywhere we pride ourselves on being smarter andfaster, it is becoming more and more important thatwe all have a basic understanding of how to speak itand how to use it. 3
    4. 4. Defining HTML and CSS?HTML: HyperText Markup Language (HTML) is themain markup language for creating web pages andother information that can be displayed in a webbrowser.CSS: Cascading Style Sheets (CSS) is a style sheetlanguage used for describing the presentationsemantics (the look and formatting) of a documentwritten in a markup language. 4
    5. 5. Can I get a Translator?In simple terms, HTML tells the webpage what eachelement is by using identifying tags and CSS tells theelement 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
    6. 6. The Basics
    7. 7. The Basic Elements of HTMLTells the computerwhat language <!DOCTYPE html>youre 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 withinthe body. <p>By learning the language of the web, we can better serve our clients needs.</p> </body> </html> 7
    8. 8. 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
    9. 9. The Basic Elements of CSS Tells the HTML to make thebody { 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 yourh2 { 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
    10. 10. What it Looks Like 10
    11. 11. Codecademy Overview
    12. 12. Codecademy 12
    13. 13. Speaking the Language
    14. 14. Key DefinitionsOkay, now that youre walking the walk, lets go over how we can talk the talk. Here are somecommon web phrases that you should learn if you want to sound like a tech guru. Bonus pointsif you can use any of these in a sentence today.JavaScript - a coding language that makes websites interactive. This language will allow you toask users to input information, move elements around on the page, and make your websitemore functional overall.jQuery - a way to create interactive websites. You can move HTML elements around, createcustom animations, and let your users affect your site with a simple mouse click.Python - a powerful, flexible programming language you can use in web/internetdevelopment, 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 writecode that can do almost anything like read Tweets, make phone calls, and track clicks on yoursites links. 14
    15. 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, suchas the toolbar, logo, tag line, ads, content and images, as well as the calculated visitormovement within the Web site through call to actions.Meta Data - Data that describes other data and inserted into documents to describe differentaspects the page such as what language it is written in, what tools were used to create it, andwhere to go for more on the subject, allowing browsers to automatically improve theexperience of users.Plug-In - a plug-in (or plugin) is a set of software components that adds specific abilities to alarger software application. Examples include Adobe Flash Player, QuickTime, and JavaApplets.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, menusand more. 15
    16. 16. Elements - Elements are designators that define objects within a page, including structure andcontent. Some of the more popular elements include h1 through h6, p, a, div, span, strong, andem.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 anelement 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 mediaelements a source (src), or to provide a hyperlink reference (href).Selectors - A selector determines exactly which element, or elements, the corresponding styleswill be applied. Selectors can include a combination of different IDs, classes, types, and otherattributes – all depending on how specific you wish to be. Selectors can be identified aseverything that comes before the first curly brace, {. 16
    17. 17. Becoming a Code Master
    18. 18. How to Learn the Language I bet youre 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/CoursesCodecademy MIT’s Open Courseware Google Code University HTML5 RocksStanford Online Coursera Mozilla’s School of WebcraftVarious Books The Code Player General Assembly PeepCode 18
    19. 19. 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

    ×