2018-04-16 HW

posted Apr 15, 2018, 7:11 PM by Konstantinovich Samuel   [ updated Apr 16, 2018, 10:04 AM ]
1.  OS / TERMINAL STUFF + FILE HIERARCHY:

Homework:
Part 1: 
Draw a tree of your file hierarchy. Start with the drive that contains your OS install. 
Windows: Start in c:\
Mac/Linux: Start in /  (the root directory)
Part 2: Read through this:


Paths and Terminal viewing of files
You need to know where you save stuff. Using a search to do so will not help you when you have multiple downloaded copies, and multiple saved copies of a file. 

pwd
ls
cat
cd
Directory Tree :




2. HTML STUFF:

A. What tags are required just to make a basic page without any content?
!DOCTYPE html
html
head
body

This is how an empty webpage would look:

<!DOCTYPE html>
<html>
    <head>
        <!-- head definitions go here -->
    </head>
    <body>
        <!-- the content goes here -->
    </body>
</html>


Comment tags tell the browser not to read the text between:
 the : <!-- 
and the-->

e.g.
<!-- ANY TEXT HERE IS IGNORED -->


What tags need to go in the head?
 Title

B. What goes in the body?
The basic elements of an HTML page are placed here:

B1. A text header is any of the following:
<h1>, <h2>, <h3>, <h4>, <h5>, or <h6>

B2. A paragraph:
 <p> 
B3. A horizontal ruler
 <hr> 
B4. A link (anchor tag)  (DISCUSSED LATER)
<a> 

B5. Lists: (DISCUSSED LATER)
 <ul> (unordered list)
 <ol> (ordered list)
 both of which use : <li> (list element) 

B6. An image:  (DISCUSSED LATER)
<img>

B7. Tags that do not do anything by themselves:
A divider
<div> 
A text span
<span>

They are mostly used for styling by using an id or class. We don't care about them for the simple things we are doing in this class. 

3. Links:

Important: You need the https:// in each link!

3A. The link is an <a> tag, with an href property. You will see many tags have a few properties inside of the <> symbols.

<a href="https://www.google.com">A link to Google</a>


3B. Internal Links:

To create a link to a different section in the same page, you will need to use a hash sign along with the element ID to where you would like the browser to jump to. For example:

<a href="#section1">Go to Section 1Questions</a>

LOTS OF TEXT IN BETWEEN.

<h3 id="section1">This is a new section!</h3>
<p>Section 1 text here...</p>



4. Images in HTML are inline elements. Inline means it can be put on the same text lines and paragraphs as other elements. (Headers are not inline, as they cause new lines to be rendered on the html) 

The <img> tag has several attributes to determine which image to render and make it display the way you want.

Which image:
The src attribute is the location of the file.
This can be a local path:
<img src="/static/img/cat.jpg">
or a remote file:
<img src="http://www.mysite.com/img/cat.jpg">

Resizing 
Use the width and height attributes of an image
<img src="/static/img/code.jpg" width="100">
alternatively by using CSS to resize:
<img src="/static/img/cat.jpg" style="width: 100px">

Other information for when the image fails to load:
Having an "alt" attribute set will add a tooltip description that will be displayed when hovering on top of an image OR when the image does not load
<img src="/static/img/cat.jpg" alt="A picture of some code">
This can be combined with the size too!
<img src="/static/img/cats.jpg" width="100" alt="A picture of some cats">

Comments