Summer Course 2013: Day 3 Make Your Own Website

Review

showing hidden files and folders, spectacle shortcuts, sublime text 2 skin, stackoverflow, html5 snippet, div, class, id, first-type-of, height, margin, padding.

Installing sublime text 2, SideBarEnhancements

cmd+shift+p, install, Sidebarenhancements to install.

Open Sublime Text 2 > Preferences > Browse Packages > User > SideBarEnhancements > Open With > Side Bar.sublime-menu

Right click on a file in sublime text 2 and select Open in Browser.

Comments in HTML and CSS

HTML

<!-- here you add your comments -->

CSS

/* here you add your comments */

CSS properties

  • border none, dotted, dashed, solid, double, groove, ridge, inset, outset
  • text-align, center, left, right

margin auto

margin with auto

.container{
    background-color: white;
    width: 300px;
    height: 600px;
    margin: 0 auto;
    border: 10px solid #ccc;
}

blockquote, pre, code

<blockquote>
    <p>
    blockquote tag
    somethng here.
    something here.
    </p>
</blockquote>

<pre>
    pre tag
    First line
    second line
    third line
</pre>

<code>
    code tag
    First line
    second line
    third line
</code>

Styling blockquote

Example 1

blockquote {
    margin: 1em 3em;
    color: #999;
    border-left: 2px solid #999;
    padding-left: 1em; 
}

Example 2

blockquote 
{
    margin: 1em 3em;
    padding: .5em;
    background-color: #f6ebc1; 
}

blockquote p {
    margin: 0; 
}

More examples

CSS trick

codrops

Anchor

target

<a href="http://www.google.com/" target="_blank">Visit Google</a>

<a href="http://www.google.com/" target="_self">Visit Google</a>

Same level anchor, One level up, sibling folder

// folder1/anchor.html
<ul>
    <li><a href="index.html">Folder Index.html</a></li>
    <li><a href="../index.html">One level up index.html</a></li>
    <li><a href="index.html" target="_blank">Same level Folder1/index.html with a new tab</a></li>
    <li><a href="../folder2/index.html">Folder2/index.html</a></li>
</ul>

Internal links

internal links

<ul >
    <li><a href="#link1">
     Internal link 1</a></li>
    <li><a href="#link2">
     Internal link 2</a></li>
     <li><a href="#link3">
     Internal link 3</a></li>
     <li><a href="#link4">
     Internal link 4</a></li>
</ul>

<div id="link1">
    <h1>Link1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde voluptas suscipit velit minima quisquam. 
    Temporibus doloremque amet nihil nobis in quod facere cum voluptates eaque nulla sequi consequuntur rerum sunt.
    Repellat nam tempore officiis numquam recusandae animi mollitia velit quia.</p>
    <h3><a href="#top">Top</a></h3>
</div>

Project Structures

- index.html
|- css 
|- img
|-js

Update all css links.

<link rel="stylesheet" href="css/mystyle.css">
// Or
<link rel="stylesheet" href="../css/mystyle.css">

Images

In index.html page type the following including alternate text. alt means "Specifies an alternate text for an image".

<img src="img/builder.jpg" alt="builder">

You can specify the dimention of the image.

<img src="img/builder.jpg" alt="builder" height="42" width="42">

Don't do hotlinkig. Finding a link by right-click an image and Copy image URL.

  • You are using other's bandwidth.
  • You have no control

Example

<img src="http://cdn.tutsplus.com/net.tutsplus.com/uploads/2013/06/laravel-plus-backbone-200.jpg" alt="builder">

You must use an image which you are allowed to use it. Your own images or creative common images.

Emmet Doc

Emmet doc

7 Awesome Emmet HTML Time-Saving Tips

Written on June 19, 2013