A website is a way to present your content to the world, using HTML to present that content and make it look good

Size: px

Start display at page:

Download "A website is a way to present your content to the world, using HTML to present that content and make it look good"

Janis Riley
5 years ago
Views:

1 What is a website? A website is a way to present your content to the world, using HTML to present that content and make it look good HTML: What is it? HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file can be created using a simple text editor like NotePad Anatomy of an HTML tag Each tag has a "start tag", "end tag", some content in between <tagname> content </tagname> Think of a tag as a "command" to the browser HTML Basics Every document needs to start and end with HTML: <html> </html> Head & Body Basic structure of an HTML document: <html> <head> <title>title of your page goes here</title> </head> <body> Bulk of your content here. </body> </html> If you wanted to change the background color of your webpage you would modify the <body> tag as follows: <BODY BGCOLOR="LIME"> Images You can copy an image from the internet and place it in your class folder, then place the image name after the img tag as follows: <img src="myimage.jpg"> 1

2 Paragraphs <p>paragraph</p> In order to change the color of your paragraph text place this tag before it: <FONT COLOR="Blue"> Horizontal Line <HR> How do I convert my HTML code to a website? Your code should be saved as MyApp.txt, when you complete your code, save your file as MyApp.html. Always remember to save your txt file every time you change it! 2

3 Your assignment for today is to start building a website for your App. Your website should look similar to this: Rubric: Requirement Points Image is properly inserted using the img 20 command paragraph is inserted using the <P> and </P> 10 tags containing the name of your app paragraph is inserted using the <P> and </P> 10 tags containing the name of your company Horizontal line is inserted using <HR> 10 Background color is selected for your website 10 using the BGCOLOR command 3

4 Bolding Use the <B> </B> tag between the <P> </P> for example <P> <B>Hi how are you </B></P> Lists To make a bulleted list, use the STYLE command after the <UL tag like this: <UL STYLE="list-style-image: url(bullet.gif)"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> Links Creating a link to another website use the <A> </A> tag, the example below would create a link called Google and open the Google webpage when clicked <a href=" 4

5 Your assignment for today is to continue a website for your App. Your website should look similar to this: Rubric: Requirement Points paragraph is inserted using the <P> and </P> 10 tags containing reasons to buy the app paragraph contains bolding using <B> and 10 </B> tags containing reasons to buy the app paragraph contains a bulleted list of 3 reasons a 10 user would buy your app Contains links to Twitter and Facebook 10 5

6 The table element The TABLE element contains all the elements that make up a table - the header, rows, and columns. This example shows a table of monthly savings. <table> <thead> <tr> <th> Name of video 1 </th> <th> Name of video 2 </th> </tr> <tbody> <tr> <td> Embedded youtube code here </td> <td> Embedded youtube code here </td> </tr> </table> To insert a video from Youtube into your table, copy the embedded code Formatted Text <em>emphasized Info</em> Emphasized Info Label element The label element is used to caption a form control, so users know what they should put in it. <label> Animal: <input type="text" name="animal" placeholder="e.g. fox"> Animal Textarea element To let the user specify multiple lines of text, use the textarea element, and specify cols or rows to specify a specific size. <label>delivery instructions: <textarea></textarea> Delivery instructions: 6

7 Your assignment for today is to continue a website for your App. Your website should look similar to this: Rubric: Requirement Points 2 x 2 table is created 12 Row 1 of the table contains the name of the 8 video s Row 2 contains video s 8 Sign Up is inserted using the <em> and </em> 8 tags Input box and label for Name exists 8 Input box and label for exists 8 Text area for address exists 8 7

8 Break To start your next command on a new line, use the <br> tag Checkboxes The input element can be used for letting users pick multiple in a list or simply indicate yes/no, using type="checkbox". <p>pizza Toppings:</p> <label> <input type="checkbox"/> Bacon <label> <input type="checkbox"/> Extra Cheese <label> <input type="checkbox"/> Onion Pizza Toppings: Bacon Extra Cheese Onion Mushroom Radio buttons Similarly, the input element can be used for creating a group of radio buttons, for letting users pick one in a list, with type="radio". <P> Pizza Size: </P> <label> <input type="radio" name="size" value="small"/>small <label> <input type="radio" name="size" value="medium"/>medium <label> <input type="radio" name="size" value="large"/>large Pizza Size: Small Medium Large Range sliders The input element can be used for users to pick a value in a range, using type="range". <label> Cheesiness: <input type="range" min="0" max="10" name="cheesiness"/> Cheesiness: *New, only supported in modern browsers. 8

9 Creating a drop down menu The select element used with the option element produces a dropdown of options for the user to pick from. <label>crust type: <select name="crust"> <option value="thin">thin</option> <option value="thick">thick</option> <option value="cheese">cheese</option> </select> 9

10 Your assignment for today is to finish your website for your App. Your website should look similar to this: Rubric: Requirement Points Male/Female Radio Buttons are created for 8 Gender Check boxes are created for your App 8 Slide bar is created for your app 8 Paragraph is created using FONT COLOR 8 Drop Down box is created 8 10

Summary 4/5. (contains info about the html)

Summary 4/5. (contains info about the html) Summary Tag Info Version Attributes Comment 4/5