Posts

Showing posts from January, 2017

Site Structure- Build structure with HTML by adding text, links, images and more.

Image
What are HTML and CSS: All websites use HTML and CSS. After learning both of these languages, you will be ready to build your own website! HTML   stands for Hyper Text Markup Language. It is used to give websites structure with text, links, images, and other fundamental elements. CSS   stands for Cascading Style Sheets. It is used to change the appearance of HTML elements. Note: An individual page of a website is referred to as a webpage. 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> All HTML elements begin with an opening tag. In this case, the opening tag is <h1>. Most elements require a closing tag, denoted by a /. In this case, the closing tag is </h1>. The website user only sees the content between the opening and closing tags. Note: There are several other HTML elements in i...
Post a Comment
Read more

A Closer Look at CSS- Learn how to style text and add background images with CSS.

Image
Why use CSS: CSS is a language used to style websites. Colors, fonts, and page layouts for a site can all be managed using CSS. The more comfortable you are with CSS, the better equipped you will be to create stylish and contemporary-looking websites. Link to a Stylesheet: 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 styles...
Post a Comment
Read more

Building with Bootstrap- Learn to create a webpage quickly using the Twitter Bootstrap library.

Image
CSS frameworks: Bootstrap is a popular CSS framework with prewritten CSS rules designed to help you build webpages faster. In this lesson, we will build this webpage up from scratch using a combination of Bootstrap and custom CSS. Also in this lesson, we will encounter three new HTML elements: header: Used to organize headers on a webpage. footer: Used to organize footers on a webpage. section: Defines sections on a webpage. 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 attri...
Post a Comment
Read more

Boundaries and Space: Learn how CSS can manage boundaries and space on webpages.

Image
The CSS Box Model: An important part of styling a webpage with CSS is organizing boundaries and space. Every page element has boundary and space properties that can be controlled using CSS. The CSS box model illustrates each of these properties. Observe the CSS box model diagram to the right: content: Includes text, images, or other media contained within an HTML element. padding: The space between the content and the border. You can think of this like inner space. border: The outline of an HTML page element. You can think of it like a picture frame that contains the element. margin: The space between the HTML page element and the next nearest element(s). After you have familiarized yourself with the Box Model, click Next to continue. 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: thickness: Sets the thickness of the borde...
Post a Comment
Read more