108 lines
2.0 KiB
Markdown
108 lines
2.0 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_
|
|
|
|
---
|
|
|
|
# Changing the Background Color
|
|
|
|
```css
|
|
/* 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:
|
|
|
|
```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.
|