Computer June 01, 2018

How to create a webpage using html and css

How to create a website using html and css

Overview

COURSE OUTCOMES

You'll build four simple websites using web development fundamentals, including HTML5/CSS3 and Bootstrap. You'll learn to understand and modify the structure of basic website, as well as how to change the way a page looks and is laid out.

https://latastupdate.blogspot.com/2018/06/How-to-create-a-website-using-html-and-css.html

WHY LEARN HTML AND CSS?

Everything you see in a website is a result of the combination of HTML and CSS. With these two languages, you will have the skills you need to bring your website design to life. Jumpstart that vision by using Bootstrap, a popular library that allows you to create beautiful, responsive pages with very little time and experience.

Syllabus

1 Site Structure

Anatomy of an HTML Element

Let's explore the basic anatomy of an HTML element. Line 9 of index.html contains a heading element:

<h1>You're Building a Website!</h1>

1. All HTML elements begin with an opening tag. In this case, the opening tag is <h1>.

2. Most elements require a closing tag, denoted by a /. In this case, the closing tag is </h1>.

3. The website user only sees the content between the opening and closing tags.

Note: There are several other HTML elements in index.html in addition to the heading element. Don't be alarmed! We will encounter most of these in more depth during the lesson.

Instructions

In index.html, change the text that appears between the <h1> opening tag and the </h1> closing tag.

Click Run to see the new text shown in the web browser!

<!DOCTYPE html>

<html>

<head>

<title>Ollie Bike Sharing</title>

</head>

<body>

<h1>You're Building a Website!</h1>

</body>

</html>

2 A Closer Look at CSS

Link to a Stylesheet

Take a look at the web browser. Technically, this is the same site you saw in the previous exercise. It contains the exact same HTML elements and content as before. What's missing? The CSS that was used to previously style the site has been unlinked.

The HTML link element links a CSS file to an HTML file so that CSS styling can be applied. Here's an example of the link element:

<link rel="stylesheet" type="text/css" href="main.css"/>

About link:

1. The link element uses three attributes:

-rel: Specifies the relationship between the current file and the file being linked to: in this case, the rel attribute is "stylesheet".

-type: Specifies the type of file linked to.

-href: Provides the URL of the file being linked to.

2. Like the HTML image element, link is self-closing. It does not need a closing tag.

3. In the example above, main.css is an external style sheet. Using external stylesheets is one of the most popular ways to write CSS. Inline CSS is another method.

<!doctype html>

<html>

<head>

<title>Sprout</title>

</head>

<body>

<h1>Mystwood Publishers Ltd.</h1>

<h2>Sprout.</h2>

<p>A book by George Bedford Daniel.</p>

</div>

<p id = "footer">© Mystwood Publishers Limited</p>

</body>

</html>

3 Boundaries and Space

Create a Border

The border property can be used to visually define a page element's outer edge.

In CSS, the border property's value requires three parts:

1. thickness: Sets the thickness of the border, using pixels, ems, or rems.

2. type: Sets the border type. Common options are solid, dotted, and dashed. There are many others.

3. color: sets the border's color, using named colors, HEX, or RGB values.

The CSS below gives a paragraph element a solid black border that is 2 pixels thick:

p { border: 2px solid black; }

Instructions

The web browser currently displays Tundra Gallery's homepage. Let's give each gallery item a border.

In main.css locate the .gallery-item class selector. Add

border: 5px
solid #FFF;

, like so:

.gallery-item { border: 5px solid #FFF; }

Click Run to see borders around each figure with the class gallery-item in the web browser.

<head>

<title>Tundra Gallery</title>

</head>

<body>

<h1 class="page-title">TUNDRA GALLERY</h1>

<p class="page-description">The Tundra Gallery is a collection of photographs from three distinct areas: arctic tundra, alpine tundra, and antarctic tundra. In tundra, the vegetation is composed of dwarf shrubs, sedges and grasses, mosses, and lichens, making for diverse ecology and stunning photos. </p>

</header>

</figure>

</figure>

</figure>

</figure>

</figure>

</figure>

</div>

<nav>

<ul>

<li><a href="#"><b>Arctic</b></a></li>

<li><a href="#">Alpine</a></li>

<li><a href="#">Antarctic</a></li>

</ul>

<div class="contact-btn"><a>Contact</a>

</div>

</nav>

</body>

</html>

4 Building with Bootstrap

Connecting to Bootstrap

Before Bootstrap can work for us, we need to link to it.

In earlier lessons, we linked only to main.css. Now, in addition to main.css, we will link to a URL that hosts Bootstrap.

The HTML link element makes Bootstrap available to us. Remember that the link element is typically contained within HTML head tags.

<head> ... <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> ... </head>

Above, the href attribute is set to the URL https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css.

Let's explore what Bootstrap can do for us.

Notice the "Skillfair" webpage to the right and locate the diagonal arrows in the top right corner of the web browser (near https://localhost:8000/). Click the arrows to toggle the web browser between narrow and full-width views, and observe the following:

1. Navbar items do not change position as you toggle the webpage width.

2. The "Homemade Goods" text appears on the far left side of the webpage.

3. Photographs increase in size when the web browser is toggled to full-width.

4. Social media icons at the bottom of the webpage appear disorganized.

Click Run after you have observed these points.

Now we will connect to Bootstrap and see changes to the webpage layout.

In index.html, locate the head element. Inside head, create a link element to link to Bootstrap:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

Click Run.

Toggle the web browser's width again to notice the following changes:

1. Navbar items change position based on the webpage's width.

2. The "Homemade Goods" text is now centered.

3. "Kitchen", "woodwork", "antique" and "gifts" photographs are arranged two per row when the webpage is full-width.

4. Social media icons appear organized and change position at full and narrow widths.

Bootstrap's grid is responsible for this screen-width responsiveness. Click Next to learn more!

<!DOCTYPE html>

<html>

<head>

<title>Skillfair</title>

</head>

<body>

<h1 class="col-sm-8">Skillfair</h1>

<p>newest</p>

<p>catalogue</p>

<p>contact</p>

</nav>

</div>

</header>

<h2>Homemade Goods</h2>

</div>

</section>

<p>kitchen</p>

</div>

<p>woodwork</p>

</div>

<p>gifts</p>

</div>

<p>antiques</p>

</div>

<a class="btn btn-secondary" href="#">View Complete Catalogue</a>

</div>

</section>

</li>

</li>

</li>

</li>

</ul>

</div>

</footer>

</body>

</html>

MyTech2515 0

Random Posts

Breaking

Thursday, 7 June 2018

Samsung Galaxy J7 / Galaxy J5 Headphones WIth Mic, Earphones, Handsfree Headset With Deep Bass And Music Equalizer (White) For Android devices

Samsung Galaxy J7 / Galaxy J5 Headphones WIth Mic, Earphones, Handsfree Headset With Deep Bass And Music Equalizer (White) For Android devices

BUY

Friday, 1 June 2018

How to create a webpage using html and css

WHY LEARN HTML AND CSS?

Anatomy of an HTML Element

Link to a Stylesheet

Create a Border

Connecting to Bootstrap

Labels

Follow Us

Recent Posts

Popular Posts

Recent

Popular

Comments

Facebook

Blog Archive

Tags

Search This Blog

Tags

Contact Us