University:
Boston University
Course:
GRS CS 910 | Directed Study: Systems
Academic year:

2023
Views:

330

Pages:

18
Author:

Bo Bishop

What is HTML/CSS Used For? What is its job? HTML/CSS is used for... ⦿ Creating documents that are displayed as web pages on the internet. ⦿ Displaying text, images, links, etc on websites ⦿ Editing and formatting text and colors on websites 3 Overall... Everything to do with how webpages are displayed! 4 HTML Intro to HTML The absolute basics Intro To HTML What exactly is html? How and where is html used? ● HTML is the standard language for creating web pages ● It describes the structure of a web page. ● HTML works because it contains elements that are clearly described. ○ It labels certain parts to be certain things like “paragraphs” or “headers” ● It is used to make all webpages. 7 The Basics of Html Tags and how to use them ● ● Tags are what allows html code to be properly formatted. They look like this: < h1> and always come in pairs < /h1> ^ the text comes between two tags that mark that text to be a certain type. This particular tag (< h1>) means a large header. 8 Creating basic things on a webpage Tags are one of the most important things to coding HTML. So… how do we use them to make: ● ● ● ● Headings paragraphs Media And more? In HTML everything needs to be inside two tags. Here is example code: 9 Breaking down the basic code: Always start with this. One of the only tags that doesn’t need an ending tag ● ● ● Everything should be inside html tags Everything between the “head” tags is “metadata” meaning it’s things that the user doesn’t actually see on the webpage. Everything you want the user to see should be between “body” tags. 10 Adding Images and more! Adding images < img src="img_girl.jpg" alt="picture of a girl" style="width: 500px; height: 600px;"> To add images: ● ● ● ● There is no end tag, only a long image tag, spelled “img” Inside the tag, you will put the image source which can be found as the image address. If the image is found on google, right click it and open it in a new tab, then right click that image and copy the image address. The alt attribute is for when ur image doesn’t display right. It will display alternate text describing the picture for situations where the image is malfunctioning, or if the user uses a screen reader. Lastly, there is the style attribute where you can adjust the width and height of the image in pixels. (It’s really helpful to write down the original ratios from google.) 12 Adding links to youtube videos To add a link to a youtube video, just go to the share button under the video. There, you will find an option that says embed, which will give you the code you can copy and paste. 13 Adding videos Adding videos with HTML is similar to adding photos, but instead of just having one tag, you have a start < video> tag and an ending one. < video width="320" height="240" controls> < source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4> < /video> Inside the start tag are the width and height controls. In between the tags is where you will put the source of the video. 14 Making tables Side note: You can use < th> and < /th> to indicate the categories in your table You can make tables in Html! Here’s how you can start! Make a < table> tag and < /table> tag. In between those make you first row using < tr>. Then make your first cell within the row using < td>. End the cell with < /td> and end the row with < /tr>. 15 Adding links that lead to another page Here’s how you can add links to another page on your website! If you want to create another page for your website then you will need to first make the html doc then link it to your page. Here’s how your do it! < a href= “Page_2.html”> page two! < /a> The “Page_2.html” would be what you named your html for your second page and the “page two!” would be the text you want to be displayed that someone can click to go to your second page. 16 Adding links to other websites If you want to add a link to another website to add credits or to add a recipe or etc. Then here’s how you do it! First find your website and copy and paste the link. Then type “< a href= “link_ location”> Website name < /a>”. The “Website name” is where the text that you want someone to click on will go. 17 Extra things in html! There are a lot of things to do in html! Here are some extra things you can do to make your website look nice! Add line breaks! < br/> Make a list! < ul> < /ul> Makes a bulleted list. < ol> < /ol> makes an ordered list. < li> < /li> makes a list term < div id= “blank”> < /div> makes a group! This makes it easier to format your website in CSS. 18 Fun fact! ^High school yearbook pic Tim Berners-Lee (my mannnnnnnnn) invented HTML in 1993, four years after he invented the World Wide Web!! 19

What is HTML Used For

Related Documents

Recommended Documents

Description

Related Documents

Free up your schedule!

Take 5 seconds to unlock