Html intro
Download as PPT, PDF0 likes1,205 views
This document provides an introduction to basic coding languages used to build websites, including HTML, CSS, and PHP. It explains that while deep coding knowledge is not needed, understanding some basic coding can help when using content management systems. HTML is used to structure web pages, CSS is used to format pages, and PHP is a scripting language used to dynamically generate web content. The document provides examples of HTML tags for paragraphs, lists, and links to demonstrate how coding is used to build web pages.
Html intro
- 1. DEMYSTIFYING HTML, CSS, PHP & OTHER CRAZY STUFF
- 2. Coding: Why Bother? DoI have to learn programming, too? Not in a deep way. (Unless you plan a career change.) What’s the benefit? You’ll likely run into some basic coding using a CMS. Understand the potential for the technology.
- 3. Alphabet Soup: Languages of the Web HTML – HyperText Markup Language CSS – Cascading Style Sheet Used to format web pages: Fonts, sizes, color, positioning, etc. Php – Hypertext PreProcessor Scripting language that generates web pages on the fly. jQuery – Code library. Makes it easy to create animated effects, slideshows, drop-down menus
- 4. Square One: What is a Web Site? A collection of files stored on a computer called a web server. Text files Graphical files (.jpg or .gif, for example) Files that contain scripts that make programs run.
- 5. A Peek Under the Hood Example
- 6. How Does Your Blog Differ? It doesn’t really. It’s a type of web site. Bloggingsoftware automatically generates web pages. Blogging software = CMS It’s a “rapid production tool.”
- 7. A Typical Web Page Can be created using any word processor. It’s usually written using code called HTML or “hypertext markup language.” It’s saved with the file extension “.html” or “.htm.
- 8. Example Open a browser and call up a web page View Source Thiscoding contains instructions to the web browser on how to display the page.
- 9. How Web Sites Get Created Coding typed in by hand. (Outmoded, but some purists do it!) Graphical editors Dreamweaver, for one… Content Management Systems (Proprietary, other, including Wordpress, Drupal)
- 10. Disclaimer Programs such as Dreamweaver are not used to produce large sites! We’re using it as a learning/editing tool. Large-scale web production requires a Content Management System: CMS
- 11. A Word About HTML Tags HTML codes usually work in pairs. Opening tag: <tag> Closing tag: </tag> Example: <b>Then you add some text here.</b> Note: Some tags are formatted this way: <br />
- 12. Paragraph Tag HTML does not recognize blank lines. You must format breaks with a tag: <P> </P>for paragraph, <br /> for a single line break. <html> <head><title>My Homepage</head></title> <body> <p> Hello world. This is my text for my page. Hello world. This is my text for my page. Hello world. This is my text for my page. Hello world. This is my text for my page. </p> Hello world. This is my text for my page. Hello world. This is my text for my page. <br /> Hello world. This is my text for my page. </body> </html>
- 13. Bulleted Lists <ul> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ul> Try this: change “ul” to “ol”
- 14. Links HTML is all about linking. You click a link to get to another page/site. Syntax for links: <a href=“http://www.boston.com”>Click this! </a> <a href=“page.html”>Click this!</a>
- 15. How Does This Work in Your Blog? Know Basic HTML tags to get “under the hood” and fix stuff! Beware of “cut and paste” from MS Word. Keep it clean!
- 16. CSS: Cascading Style Sheets Used to define Connection to Your layout, formatting Blog or Web Site? of web pages. Applies changes across the entire site. Usedin addition to HTML.
- 17. What Does it Look Like?