Web browsers. 1. Google Chrome - 62% 2. Mozilla Firefox - 15% 3. Internet Explorer - 10% 4. Safari - 5 % 5. Microsoft Edge - 4% 6.

Transcription

1 Web site design

2 Web browsers 1. Google Chrome - 62% 2. Mozilla Firefox - 15% 3. Internet Explorer - 10% 4. Safari - 5 % 5. Microsoft Edge - 4% Mozilla Firefox 6. Opera 2% 7. Others 2% combined

3 What s going on behind the scenes (Source code)

4 What is HTML HTML = HyperText Markup Language HyperText = Words in a document that are linked. You can click on them to go to a new piece of information. Markup Language = A language used to edit copy; to mark it up. Example: <p> Hello, I m a PowerPoint presentation.</p>

5 What is CSS Cascading Style Sheets Style sheets are documents that a web browser uses to know where to put elements, what the colors should be, etc..style1 {background-color: #5d674f}

6 HTML <p align="center" class="style1">welcome to Anatta-net</p> <h2> <p align="center">comparing the structure of the Internet to the Buddhist concept of noself</p> </h2> <table width="75%" border="1" align="center" cellpadding="10" bordercolor="black"> <tr> <td><p align="left">the air comes in and goes out like someone passing through a swinging door. <br> If you think, "I breathe", the "I" is extra. There is no you to say "I". <br> What we call "I" is just a swinging door, which moves when we inhale and when we exhale. <br> It just moves; that is all. </p> <p align="right"><a href="references.html">suzuki, n.d.</a></p> </td> </tr> </table> <p align="left"> There is no I, no real, unchanging me - this is a tough concept for most people to grasp. For over 2,500 years this concept, called anatta, has been a cornerstone of the Buddhist religion. Many people have struggled to fully understand it because of its apparent abstract nature. Within the last few decades though, a real-world model of this concept has emerged - the structure of the Internet.</p>

7 HTML <p align="center" class="style1">welcome to Anatta-net</p> <h2> <p align="center">comparing the structure of the Internet to the Buddhist concept of noself</p> </h2> <table width="75%" border="1" align="center" cellpadding="10" bordercolor="black"> <tr> <td><p align="left">the air comes in and goes out like someone passing through a swinging door. <br> If you think, "I breathe", the "I" is extra. There is no you to say "I". <br> What we call "I" is just a swinging door, which moves when we inhale and when we exhale. <br> It just moves; that is all. </p> <p align="right"><a href="references.html">suzuki, n.d.</a></p> </td> </tr> </table> <p align="left"> There is no I, no real, unchanging me - this is a tough concept for most people to grasp. For over 2,500 years this concept, called anatta, has been a cornerstone of the Buddhist religion. Many people have struggled to fully understand it because of its apparent abstract nature. Within the last few decades though, a real-world model of this concept has emerged - the structure of the Internet.</p>

8 Tags Tags are the key to HTML, they tell the web browser what to do with the information contained inside the tags. All tags are written in two part: 1. Opening tag Do something to the following content. 2. Closing tag Stop doing something to the content. Example: <p> Hello, I m a PowerPoint presentation.</p> <p> - Everything that follows is a paragraph. </p> - Stop defining content as a paragraph.

9 Tags cont % of the mistakes you make when starting to learn HTML is forgetting to put on the closing tag. Ex:</p> There are a variety of tags to tell the browser what to do: <p> </p> = Paragraph <style> </style> = Use CSS Last two pages in the textbook contain the HTML tags

10 Attributes Attributes can be assigned to a specific tag to customize what it does <p align= center > I m aligned center!!</p> This attribute tells the browser to center the text on the web page Attributes always - Go with the opening tag Contain an = Enclosed inside of

11 Tags tell the browser what to do with the content between them Attributes give more detail to what the browser should do with the content between the tags <table width="86%" height="502" border="0"> </table> What are the tags? What are the attributes? What s the code saying?

12 Let s look at this again <p align="center" class="style1">welcome to Anatta-net</p> <h2> <p align="center">comparing the structure of the Internet to the Buddhist concept of noself</p> </h2> <table width="75%" border="1" align="center" cellpadding="10" bordercolor="black"> <tr> <td><p align="left">the air comes in and goes out like someone passing through a swinging door. <br> If you think, "I breathe", the "I" is extra. There is no you to say "I". <br> What we call "I" is just a swinging door, which moves when we inhale and when we exhale. <br> It just moves; that is all. </p> <p align="right"><a href="references.html">suzuki, n.d.</a></p> </td> </tr> </table> <p align="left"> There is no I, no real, unchanging me - this is a tough concept for most people to grasp. For over 2,500 years this concept, called anatta, has been a cornerstone of the Buddhist religion. Many people have struggled to fully understand it because of its apparent abstract nature. Within the last few decades though, a real-world model of this concept has emerged - the structure of the Internet.</p>

13 Web page creation

14 Open Notepad and type <html> <head> </head> <body> <p>this is my first web page</p> </body> </html> Save the page as: page01.html

15 Let s make it harder How do you center you text on your web page? How make the text bold? (use your text books) <html> <strong> </strong> <head> </head> <body> <p align= center >This is my first web page</p> </body> How make the text italics? (use your text books) <em> </em> </html>

16 Add another paragraph <html> <head> <title>my first web page</title> </head> <body> <p>this is my first web page.</p> <p>this is the second text box.</p> </body> </html> Save as: page02.html

17 Align text with 2 paragraphs <html> <head> <title>my first web page</title> </head> <body> <p align= center >This is my first web page.</p> <p>this text is set left by default.</p> </body> </html> What if I want both lines centered?

18 Align <html> <head> <title>my first web page</title> </head> <body> <p align= center >This is my first web page.</p> <p>this text is set left by default.</p> </body> </html> <body> <p align="center">this is my first web page.</p> <p align="center">this text is set left by default.</p> </body> Page04.html OR <body> <p align="center">this is my first web page. <br> This text is set left by default.</p> </body> Page05.html <br> = Line break, no extra space

19 Important points to remember 1. Every command needs an open and closed tag 2. HTML uses tags and attributes 3. Save your pages as xxxxx.html