Notepad/enter/HTML Tricks Part 2.md

1.6 KiB

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


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"

#input image code for html

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

#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>

Shwetha Jayaraj - all rights reserved.