Web Programming Week 2 Semester 1-2018 Byron Fisher 2018
INTRODUCTION Welcome to Week 2! In the next 60 minutes you will be learning about basic Web Programming with a view to creating your own ecommerce website by the end of this semester.
BASIC HTML RULES HTML is a markup language for describing web pages. A markup language is a set of tags that you use to describe the document content. Web browsers (like Safari, Firefox and Chrome) read these tags and render the content accordingly.
BASIC HTML RULES HTML stands for HyperText Markup Language Each HTML tag describes different document content
BASIC HTML RULES Most tags are paired, one opens and the other closes eg: <tag></tag> Some tags like images <img />, breaks <br />, horizontal lines <hr /> are empty tags, they open and close together
BASIC HTML RULES Tags can be nested, for example tags within tag. But they must be closed in the same order they were open <first><second><third> </third></second></first> is good <first><second><third> </first></second></third> is bad
HTML ELEMENT SYNTAX Start Tag Values Content <p id="unique" class="foo">this is a paragraph.</p> Attribute End Tag
COMMENTS HTML also supports comments Comments are text that is not read by the browser It lets programmers put notes inside their code Useful when working in a group and other people are trying to understand the structure of your code How to write a comment: <!-- This is a comment in HTML -->
END PART ONE
BASIC HTML STRUCTURE A HTML document is made up of two main sections. The <head> The <body>
BASIC HTML STRUCTURE A skeleton HTML document looks like this (the indentation is optional but it makes code a lot easier to read). <!doctype HTML> <html> <head> <title>title goes here</title> <!-- Stuff you can t see --> </head> <body> <!-- Stuff you can see --> </body> </html>
WHAT DOES THIS MEAN? <head> This section is where you can specify attributes such as the page title. This is also where you would include code to style the page. Can also put <meta tag /> like the author/s of the website
WHAT DOES THIS MEAN? <body> This is where you put all of your content. Anything you want visitors to see goes here. Content put in the body should be enclosed in the relevant tag.
TEXT TAGS There are two main sets of tags for describing text, the first is the heading. Headings range from <h1> to <h6> (try and see the difference as the numbers increase). <!doctype HTML> <html> <head> <title>title goes here</title> </head> <body> <h1>i am a heading</h1> <h6>i am another heading</h6> </body> </html>
TEXT TAGS The other is the paragraph. <p></p> <!doctype HTML> <html> <head> <title>title goes here</title> </head> <body> <p>i am a paragraph</p> </body> </html>
NEW LINE There are two ways to create new lines. <br /> <hr /> <!doctype HTML> <html> <head> <title>title goes here</title> </head> <body> <p>put text on a <br />new line.</p> <p>or put a horizontal <hr /> line here</p> </body> </html>
END PART TWO
ADVANCE HTML Now that you have some pictures, let s use them in your site. Images can be included in a HTML document using the <img /> tag. <html> <body> <!-- Use single word file names, don't include spaces --> <img src="yourphoto.jpg" /> </body> </html>
ADVANCE HTML If you want to create a list there are two kinds. Numbered (ordered) and bullet points (unordered). This is an ordered list <ol> <li>item 1</li> <li>item 2</li> </ol> This is an unordered list <ul> <li>item 1</li> <li>item 2</li> </ul>
ADVANCE HTML If you want to represent tabular data, we have the <table> tag. <tr> defines a row <td> is a cell in a row <table border="1"> <thead> <th>first Column</th> <th>second Column</th> </thead> <tbody> <tr> <td>hello</td> <td>there</td> </tr> </tbody> </table>
BLOCK vs INLINE ELEMENTS You may have seen already that some HTML elements render on a new line and some do not. Ones that render on a new line are called block elements. They always start on a new line and take up the full width available. Ones that don t are called inline elements. An inline element does not start on a new line and only takes up as much width as necessary.
BLOCK vs INLINE ELEMENTS Block Elements (Think of a building block) <header></header> <footer></footer> <nav></nav> <main></main> <section></section> <div></div> <p></p> <h1></h1>, <h2></h2>... <h6></h6> <ul></ul> / <ol></ol> <li></li> Inline Elements (Align next to each other) <a></a> <span></span> <img /> <br /> <em></em> <strong></strong> <input />
BLOCK vs INLINE ELEMENTS With nested tags, inline element must go within a block element. A block element CAN NEVER go into a inline element. Block elements can go into block elements, and inline elements can go into inline elements
BLOCK vs INLINE ELEMENTS <block><block><inline> </inline></block></block> is good <block><inline><inline> </inline></inline></block> is good <block><inline><block> </block></inline></block> is bad <inline><inline><block> </block></inline></inline> is bad
PAIRED and EMPTY TAGS <i> </i> is a paired tag <br> <hr> are examples of empty tags In paired tags, the first tag is referred as an Opening Tag and the second tag to as Closing Tag. An empty tag does not have a companion tag.
HTML5 SEMANTIC ELEMENTS Semantics is the study of the meanings of words and phrases in language. Semantic elements are elements with a meaning. A semantic element clearly describes its meaning to both the browser and the developer.
HTML5 SEMANTIC ELEMENTS Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <img /> - Clearly defines its content.
HTML5 SEMANTIC ELEMENTS HTML5 introduces a bunch of new elements to help build the website for the developers, browsers and other devices to understand the site better. It also helps makes it possible for search engines to identify the correct web page content.
HTML5 SEMANTIC ELEMENTS <header> The <header> element specifies a header for a document or section. The element should be used as a container for introductory content. <nav> The <nav> element defines a set of navigation links. The element is intended for large blocks of navigation links.
HTML5 SEMANTIC ELEMENTS <footer> The<footer> element specifies a footer for a document or section. A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc
HTML5 SEMANTIC ELEMENTS There are a range of additional semantic elements that HTML5 introduces. Can you name identify some more? <html> <body> <header> <h1>byron s Shop</h1> </header> <nav> Links go in here... </nav> <footer> Byron Fisher <footer> </body> </html>
RECAP Join my kahoot.it quiz To understand where everyone is at with communication, and knowledge please join the quiz!
WEEK 2 REVIEW Any questions :3?