2.0 KiB

Raw Blame History

From Shway (that's me)

Last week we went over the basic structure of an HTML webpage and learned the following code:

What we did last time

things in hashtags are a comment & don't appear in the code

# makes the program know that it is an html doc <html> <head> # this appears on the title bar </head> # the body is what will be inside the webpage itself!

Blah balah

</html> #closing html program tag

Remember how we turned it into a web page? quickly go over it

Changing the Background Color

/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: pink;
  color: green;
  font-family: Times;
}

DESIGN CHALLENGE: WEB PROGRAMMING: HTML PT 2

This week we want to ✨spruce✨ up our website a bit more so that it looks like a presentable one. We will be getting in groups to present group designs. The challenge is on!

Tip - Adding an image to your site:

Go to google images and right-click on any image. You should see a "Copy Link Address" and click that. Paste it into "URL-here.jpg"

<img src="URL_HERE.jpg"> #input image code for html

Hint: make sure for the Link address that it's either a .jpg or a .png format!

<img src="URL_HERE.jpg"
style="width:100%;">

this adjusts the size of the image

Tip :

Add a Search bar into your site

<input type="search" name="search">

Eventually CSS will be needed for multiple page creation in order to maintain consistency.

Linking to different parts of your code on HTML:

<header>
    <h1>The Heading</h1>
    <a href="#content">Skip to content</a>
</header> 

<nav>
    <!--loads of navigation stuff -->
</nav>

<section id="content">
    <!--lovely content -->
</section>

2.0 KiB Raw Blame History