O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

The Language of the Web - HTML and CSS

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 19 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a The Language of the Web - HTML and CSS (20)

Anúncio

The Language of the Web - HTML and CSS

  1. 1. The Language of the Web Learning to Code in HTML and CSS
  2. 2. Overview
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. The Basics
  7. 7. 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
  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 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
  10. 10. What it Looks Like 10
  11. 11. Codecademy Overview
  12. 12. Codecademy 12
  13. 13. Speaking the Language
  14. 14. 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
  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, 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
  16. 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, {. 16
  17. 17. Becoming a Code Master
  18. 18. 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
  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

Notas do Editor

  • 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

×