Week 2&3 Intro to Personal Website and HTML

Week 2&3: Intro to Personal Website and HTML

&nbsp &nbsp

1. Create a repo in GitHub¶

1.1 Create a new repo in GitHub¶

Createa repo which name should be username.github.io, where username is your username (or organization name) on GitHub.

Select 'Public'
Select 'Add README file'

2. Check url of your personal website¶

Go to Seting of your repo
Go to Pages on the left side bar
Check the url of your personal website (The url does not generate immediately, you can check progress in action)

3. Clone your repo to local computer¶

git clone <url>

4. HTML page¶

4.1 What is html?¶

Hyper Text Markup Language
It is used for creating web pages
Describes the structure of a web page
Consists of a series of elements

4.2 HTML Page Structure¶

The html document itself begins with <html> and ends with <html>
Content inside <head>
Content inside the <title> shown in the browser's title bar
Content inside the <body> section will be displayed in a browser

Source

4.3 What is an HTML element?¶

An HTML element is contained from start tag, and an end tag

<tagname> Content goes here ... </tagname>

<html> Content </html>

<head> Content </head>

<body> Content </body>

4.4 The type Declaration¶

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.

<!DOCTYPE html>

Exercise 1: Create a html and construct the basic structure¶

Create html file in VS Code

The html file with name 'index.html' is recongizaed by GitHub as your personal website

Open html in VS Code

Beofre you edit html in VS code, install severall extensions to power your VS Code

Search extension from the left side panel:

Live Server: Launch local server
HTML Boilerplate: help on html editing

type html and select html5:boilerplate
Understand the basic structure of html

5 head element¶

5.1 meta element¶

<meta charset = 'UTF-8'>: Specifies the character encoding for the HTML document
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width=device-width: sets the width of the page to follow the screen-width of the device
- initial-scale=1.0: the initial zoom level when the page is first loaded by the browser

5.2 title element¶

<title>Personal Website</title>

6. What inside the body element?¶

6.1 header¶

<header> Content </header>
For introductory content or a set of navigation links

6.2 heading¶

<h1>Heading 1</h1>
<h5>Heading 5</h5>

6.3 paragraph¶

<p>Heading 1</p>

6.4 Comment¶

Shortcut for inserting comments:

Windows/Linux: Ctrl + /
Mac: Cmd + /

Exercise 2: Add the header,heading and paragraph¶

Add header
Add heading
Add paragraph

7. HTML Attributes¶

Attributes provide additional information about elements

Attributes are always specified in the start tag

7.1 Style¶

The stype attribute is used to change color, font, size and more

Format: <tagname style="property:value;">
background-color
Text-color
Fonts

Examples:

<h1 style="font-size:60px;">Heading 1</h1>

<p style="font-size:60px;">Such a good day</p>

<h1 style="color:blue;">This is a heading</h1>

7.2 Text formatting¶

There are several elements for defining text with a special meaning

<p><strong>My major is GIS</strong></p>

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

Exercise 3: Edit your text using style and Text formatting¶

Using style
Using Text formatting

8. HTML Attributes: Image¶

8.1 Image¶

Specifies the path the image, width and height of the image (in pixels), alternate text for an image and tooltip for the text or image

<img src="img_university.jpg" width="300" height="200" alt = 'Clark'>

You can store image in Github and use the relative path (without the "https://www part) as the link

8.2 Background image¶

Image on a HTML element¶

<p style="background-image: url('Images/clark.jpg')">Clark University is a private research <br> university in Worcester, Massachusetts. Founded in 1887 <br> with a large endowment from its namesake Jonas Gilman <br> Clark, a prominent businessman, Clark was one of the first <br> modern research universities in the United States.</p>

9. HTML Attributes: Hyperlink¶

9.1 Hyperlink¶

Use words as a link

<a href="https://www.clarku.edu/" target ="_top">Clark University</a>

target Specify where to open the linked document _self: Default. Open in the same window _blank: Open in a new window _parent: Open in the parent frame _top: Open in the full body of the window

Use an image as a link

<a href="https://www.clarku.edu/" target ="_black"><img src="Images\clark.jpg" alt="clark"> </a>

Link to an Email Address

<a href="mailto:someone@example.com">Send email</a>

Exercise 4: Add image and link¶

Add image
Add link

10. Linking to a Bookmark¶

10.1 Bookmark for header¶

It is created using the <a> tag with an <id> attribute to connect a section and nagavitation title

First, we create a bookmark for a element using id attribute

<h1 id = "Pro">Projects</h1>

Second, we add a link to the bookmark within the same page. For example, we add a link to the Projects in <header>

<header><a href="#Pro">Projects</a></header>

Exercise 5: Add bookmark¶

create a bookmark for a element using id attribute
Add a link to the bookmark

Basically navigation bar is the list of links

Create navigation bar using ul and li

<nav>, <ul> and <li> build the navigation bar for a HTML
<nav> is used to defines a set of navigation links and mainly intend for major blocks of navigation links
<ul> and <li>create list of navigation bars

Connect to section

Add id in the element, e.g, <p id = >

13. Div element¶

<div> is used to group sections of a web page together

We can have many <div> elements on the same page

Exercise 7: Add Div¶

Use the <div> to group sections of a web page together

Exercise 8. Div contain figure and figure caption¶

Learn how many <div> need to be used for group sections
Use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the photo

Defines a footer for a document or section

Add footer

Comprehend list of HTML Tags

Troubleshooting¶

If you get error message like below:

The possible issue is the buffer size in GitHub

Solution:

git config http.postBuffer 524288000

Or decrease the image's size on your personal website

Week 2&3 Intro to Personal Website and HTML