Notepad/enter/HTML Tricks Part 2.md

76 lines
1.6 KiB
Markdown

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
<!DOCTYPE html> # makes the program know that it is an html doc
<html>
<head>
<title>This is the title </title> # this appears on the title bar
</head>
<body> # the body is what will be inside the webpage itself!
Blah balah
</body>
</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"
<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:
```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.