html intro
DESCRIPTION
TRANSCRIPT
![Page 1: Html intro](https://reader033.vdocument.in/reader033/viewer/2022061210/54909ed6b479591e1d8b4f5e/html5/thumbnails/1.jpg)
DEMYSTIFYINGHTML, CSS, PHP & OTHER CRAZY STUFF
![Page 2: Html intro](https://reader033.vdocument.in/reader033/viewer/2022061210/54909ed6b479591e1d8b4f5e/html5/thumbnails/2.jpg)
Coding: Why Bother? Do I 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.
![Page 3: Html intro](https://reader033.vdocument.in/reader033/viewer/2022061210/54909ed6b479591e1d8b4f5e/html5/thumbnails/3.jpg)
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 PreProcessorScripting language that generates web pages on the fly.
jQuery – Code library. Makes it easy to create animated effects, slideshows, drop-down menus
![Page 4: Html intro](https://reader033.vdocument.in/reader033/viewer/2022061210/54909ed6b479591e1d8b4f5e/html5/thumbnails/4.jpg)
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.
![Page 5: Html intro](https://reader033.vdocument.in/reader033/viewer/2022061210/54909ed6b479591e1d8b4f5e/html5/thumbnails/5.jpg)
A Peek Under the Hood Example
![Page 6: Html intro](https://reader033.vdocument.in/reader033/viewer/2022061210/54909ed6b479591e1d8b4f5e/html5/thumbnails/6.jpg)
How Does Your Blog Differ? It doesn’t really. It’s a type of web site.
Blogging software automatically generates web pages.
Blogging software = CMS It’s a “rapid production tool.”
![Page 7: Html intro](https://reader033.vdocument.in/reader033/viewer/2022061210/54909ed6b479591e1d8b4f5e/html5/thumbnails/7.jpg)
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.
![Page 8: Html intro](https://reader033.vdocument.in/reader033/viewer/2022061210/54909ed6b479591e1d8b4f5e/html5/thumbnails/8.jpg)
Example Open a browser and call up a web page
View Source
This coding contains instructions to the web browser on how to display the page.
![Page 9: Html intro](https://reader033.vdocument.in/reader033/viewer/2022061210/54909ed6b479591e1d8b4f5e/html5/thumbnails/9.jpg)
How Web Sites Get Created Coding typed in by hand.
(Outmoded, but some purists do it!)
Graphical editorsDreamweaver, for one…
Content Management Systems(Proprietary, other, including Wordpress, Drupal)
![Page 10: Html intro](https://reader033.vdocument.in/reader033/viewer/2022061210/54909ed6b479591e1d8b4f5e/html5/thumbnails/10.jpg)
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
![Page 11: Html intro](https://reader033.vdocument.in/reader033/viewer/2022061210/54909ed6b479591e1d8b4f5e/html5/thumbnails/11.jpg)
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 />
![Page 12: Html intro](https://reader033.vdocument.in/reader033/viewer/2022061210/54909ed6b479591e1d8b4f5e/html5/thumbnails/12.jpg)
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>
![Page 13: Html intro](https://reader033.vdocument.in/reader033/viewer/2022061210/54909ed6b479591e1d8b4f5e/html5/thumbnails/13.jpg)
Bulleted Lists <ul> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ul> Try this: change “ul” to “ol”
![Page 14: Html intro](https://reader033.vdocument.in/reader033/viewer/2022061210/54909ed6b479591e1d8b4f5e/html5/thumbnails/14.jpg)
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>
![Page 15: Html intro](https://reader033.vdocument.in/reader033/viewer/2022061210/54909ed6b479591e1d8b4f5e/html5/thumbnails/15.jpg)
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!
![Page 16: Html intro](https://reader033.vdocument.in/reader033/viewer/2022061210/54909ed6b479591e1d8b4f5e/html5/thumbnails/16.jpg)
CSS: Cascading Style Sheets
Used to define layout, formatting of web pages.
Applies changes across the entire site.
Used in addition to HTML.
Connection to Your Blog or Web Site?
![Page 17: Html intro](https://reader033.vdocument.in/reader033/viewer/2022061210/54909ed6b479591e1d8b4f5e/html5/thumbnails/17.jpg)
What Does it Look Like?