Basic Hypertext Markup Language (HTML) and Cascading Stylesheets (CSS)
Hypertext Markup Language (HTML)
HTML Introduction
HTML is the basic language of the web and is easy to learn and understand!, HTML describes what a page should look like when viewed through a web browser i.e., Mozilla Firefox, Google Chrome, Safari, Internet Explorer.
HTML is a markup language which is comprised of a set of tags that describe the document's content. HTML files are simple text files that contain plain text and tags and typically have the file extension of .html or .htm. They are commonly referred to as web pages.
HTML Tags
HTML Tags are keywords or tag names surrounded by angle brackets or <> and normally come in pairs like this <opening tag> and </closing tag>.
For example
<opening tag>content</closing tag>
Your HTML document should always contain <html> to signify the beginning of the HTML content and </html> to signify the end. Without this tag , the document is only text.
HTML Editors
HTML ca be created or edited in many different types of editors, many of which are free and work incredibly well. In reality, all you need is a simple text, like Microsoft Notepad, or TextEdit on a Mac.
An HTML editor makes things much easier by color coding different items making it simple to find specific items or locate errors.
Some free editors:-
HTML Basics
Working with HTML is like working with word processing software, once your content is written you simply start at beginning of the content select and use BOLD or ITALIC as your choice, but in HTML we use tags to identify the content instead of highlight it.
<b>Bold</b>
HTML Elements
An HTML element is usually consist of start tag or opening tag and an end tag or closing tag, with the content inserted in between,
<tagname>content goes here...</tagname>
Some special element that don't have any closing tag, these tags are known as empty tags, like line break <br> this tag doesn't have closing tag.
Special Elements
While there are a number of special HTML elements, such as the <br> tag mentioned above, there are some other special elements you should know.
HTML Lines
The HTML horizontal rule ca be used to divide content areas and uses the <hr> tag. It draw a horizontal line across your content area.
HTML Comments
Comments can be inserted into HTML code to make it more readable and to explain to the reader of your code what it is you plan to do or what you have changed. It's always good practice to comment your HTML code.
Comment elements are written as follows----
<!--This is Comment -->
The <!-- is the beginning of the comment and the --> is the end. Everything typed within these tags will be invisible to the viewer unless the source code is viewed.
HTML Attributes
All HTML elements can have attributes, they provide the additional information about an element, attribute always specified in the start or opening tag
<tag name="value"> content </tag>
Some Attributes:-
Source:- w3schools.com (https://www.w3schools.com/html/html_attributes.asp)
HTML Headings
HTML headings are defined with <h1> through<h6> tags. <h1> defines the most important heading while <h6> defines the lease important heading. The browser used to view the headings will automatically add space before and after each heading. It is very important that you use headings for your content headers only and not simply to make any text larger. Search engine crawlers will use your heading tags to organize your content by order of importance. <h1> should always be used for your important topics, followed by <h2> and so on.
HTML Paragraphs
A paragraph always starts on a new line, and browsers automatically add some white space before and after a paragraph.
The HTML <p> element defines a paragraph.
you cannot be sure how HTML will be displayed, with HTML you cannot change the output by adding extra spaces or extra lines in your code.
The browser will remove any extra spaces and extra line when the page is displayed.
Example of <p> element:-
<p>This is first paragraph</p>
<p>This is Second Paragraph</p>
HTML Formatting
HTML also uses tags for formatting text, much like you would with a word processing program. Text formatting means simply things like bold, italic, and underline. You should note, however, that underlining text in an HTML document is terribly poor form as it can be misconstrued as a link. All formatting tags must be closed.
Example:--
<p><b>This text is Bold </b></p>
<p><i> This text is italic </i></p>
full HTML:-
<!DOCTYPE html>
<html>
<head>
<title>
Formatting
</title>
</head>
<body>
<p><b>This text is in bold</b></p>
<p><i> This text is italic</i></p>
</body>
</html>
<html>
<head>
<title>
Formatting
</title>
</head>
<body>
<p><b>This text is in bold</b></p>
<p><i> This text is italic</i></p>
</body>
</html>
HTML Links
The HTML <a> tag defines an anchor or hyperlink.
A hyperlink or link is a word, group of words, or image that you can click on to jump to another document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
The most important attribute of the <a> element is the href attribute, whic indicates the link's destination.
By default, links eill appear as follows in all browsers:
- An unvisited link is underlined and blue,
- A visited link is underlined and purple
- An active link is underlined and red.
HTML Link Syntax
An HTML link is required to have an attribute in order to have a function. The <a> tag will surround the content you wish to effect, whether it be an image, text or any other HTML element. The value of the attribute must be contained in quotes.
The target attribute specifies where to open the linked document and is supported in all major browsers.
The target attribute can have one of the following values:-
.
This example will open the linked document in a new browser window/tab :-
Visit Information and Technology Blog
HTML of above example is:-
<a href="https://techgeekswami.blogspot.com/" target="_blank"> Visit Information and Technology Blog </a>
HTML Head
The HTML <head> element is a container for metadata and is placed between the <html> and <body> tag. Elements inside the head can include scripts, tell the browser where to find external information such as stylesheets or Javascripts and provide search engines with descriptive information about the content of the page.
Metadata typically define the document title, character set, styles, scripts and other meta information.
Some head elements:-
Image source:- w3schools.com
HTML Images
Images are displayed in HTML by use of the <imp> tag. The <img> tag does not need to be closed, as it's an empty tag. The <img> tag has multiple attributes to define what to display and how it should be displayed. As with other attributes, values must be contained in quotes.
Some HTML Image tags:-
HTML Tables
A table is comprised of rows and columns, similar to a spreadsheet, and cab be quite complex. HTML tables allow web authors to arrange data into rows and columns.
The table start with the <table> tag, <table> tag signifies the start of a table but will need other tags to assign rows and columns inside it.
- Rows define with <tr> tag
- Columns define with <td> tag
<table>
<tr>
<td> Row One - Column one </td>
<td> Row One - Column two </td.
</tr>
<tr><td> Row Two - Column one </td>
<td> Row Two - Column two </td>
</tr>
</table>
Table Lists
There are tow types of lists in HTML, Ordered and Unordered. Quite simply, the two are best described as Numbered and Bulleted, respectively. Lists contain two types of tags:
- <ol> for ordered list or Number list
- <ul> for Unordered list or Bullet lis
<ul>
<li>list item</li>
<li>list item</li>
<li> list item</li.
</ul>
Output:-
Unordered list
- item list
- item list
- item list
<ol>
<li>item list</li>
<li>item list</li>
<li>item list</li>
</ol>
Output:-
Ordered list
- item list
- item list
- item list
HTML also supports description list. A description list is a list of terms, with a description of each term.
The <dl> defines the description list, <dt> tag defines the term and <dd> tag describes each term.
Example:-
Output:-
HTML <div> tag
The HTML <div> tag is frequently used in the e-Community modules. Almost every Web Customization, Web Option and Page Area has a <div> tag associated with it. Mastering the <div> will allow you to completely control the way your e-Community modules will be desplayed.
The <div> tag is a block level element and is used to group other HTML elements. Alone, the <div> tag has no particular effect on your document, but it is important to note that, because it's a block level element that a new line well be started.
<div> tag are most often assigned a 'class' attribute. A class attribute can be any value (not any number) and is typically a common name or phrase. You can find the class attribute of Web Customizations by viewing the style code on the web customization.
Identifying the class will allow you to control how it is displayed using CSS.
Example:-
<div class="content">
<p> This is a paragraph in the 'content' section of the document </p>
</div>
Basically, this means that content is contained within the <div> tag is assigned the class of 'content'. Class is oe way you can assign style using CSS.
Cascading Stylesheets (CSS)
CSS Introduction
Cascading Style Sheets (CSS) are rules used to control the way a web browser displays elements on a page.
With a basic understanding of HTML you can now learn to control it with CSS. CSS defines how to display your HTML elements bu element name,ID or Class.
ID and Class are attributes of your HTML elements, and most common in e-community, the <div> tag.
In HTML you can define the content of the document, heading, paragraphs, lists etc., but CSS will used to define what each of those elements will look like defining a Rule.
In simple words it helps you to how your page look like.
CSS will be defined in your HTML document in one of three ways:
In the <head> tag :
- Referenced to an external .css file.
- Written directly in the <head> in a <style> tag
- Inline, or written within the HTML code itself.
CSS Syntax
CSS is a set of rules. the rules specify the display properties. To put it in simple terms:
Example.:- p {
font-family:Arial; font-size:12px; color:gray;
}
While it may appear complicated it can be broken down into its parts.
CSS rules can control many properties, called declarations, of an element, to display exactly how you want in a clear, consice manner. Declarations are always contained in curly braces ( {}) and each declaration will end in a semi-colon (;). Each element is chosen in CSS by the 'selector' and defined in the 'declaration' by a 'property' and a 'value'.
In the example rule below, the <h1> element will be displayed: blue in color and with a font size of 12 pixel
The selector pints to the HTML element you want t style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
You can also comment on CSS code much like you can with HTML.
Comment signifies with /* at the beginning */ at the end, you can type whatever text you want in these indicators.
CSS Styling Backgrounds
There are multiple declarations you can assign to the background of your <div> or other element such as:
- background-color
- background-image
- background-repeat
body {
background-color; red;
}
You can also define a background image for your <div> tag or other element by using the background-image declaration. By default, a background image will display repeatedly unless you control it with the background-repeat declaration.
Below is an example:
.somediv {
background-image: url(anyimage.jpeg);
background-repeat: no-repeat;
}
CSS Styling Text
All of your text in an HTML document can be controlled by CSS. You can either define a rule for a particular element, such as <p>, <h1>, or by a <div> class for example.
Text color can be defined usin the declaration:color. Colors can be defined by a color name, RGB values or Hex Colors. For example:
p {
color: red;
}
This rule says that all text contained within a <p> tag will have the color:red.
There are other declarations that define how text should display. One of the great features of CSS is the most declarations are in plain English.
In next example, we'll define how <h1> tag should look like:
h1 {
color: #333333; /*known as gray in hex color*/
text-decoration: underline;
text-transform: uppercase;
text-indent: 10px;
text-family: arial;
text-size: 12px;
}
This will give the result of a <h1> tag that is gray, underlined, in all uppercase letters, indented 10px, in arial font that is 12px high.
Hex Value
In CSS, a color can be specified using a hexadecimal value in the form:
#rrggbb
CSS Styling Fonts
In the example above we define some font characteristics for our <h1> tag. You can define other properties as well such as:
CSS Styling Links
Links can be styled just like any other text, but they have a special function called a link state. The link state is what happens when you interact with a link. The four interactions, or link states are:
- Link - A normal link that has not been clicked
- Visited - A link that has been clicked
- Hover - A link when the mouse curser is over it
- Active - A link when it is being clicked
Example of each usage:
a: link {color: red;} /*unvisited link*/
a: visited {color: blue;} /*visited link*/
a: hover {color: green;} /* mouse over link*/
a: active {color: black;} /* selected link*/
CSS Styling Tables
Tables can be styled by addressing each of the elements that construct them. You can define borders and colors and the text contained in each. You can define that multiple elements are affected by the rule by including each element separated b a comma.
table, tr, td {
border: 1px;
}
CSS Box Model
The CSS box model is the idea that each element on your page exists in its own 'box'. When you open a <div> tag and close a </div> ta,pg you essentially create a 0px by 0px empty box. Items you place inside the box, like a <p> or a <table> cause it to grow in size to fit the content. You can control the box's size and other properties, regardless of its content, by using positioning, dimension, margin, padding, background and border properties for the <div> element.
When addressing the box model we refer to the following:
- Content - The actual HTML element
- Border - A line around the content
- Padding - the space between the content its border
- Background image - An image displayed behind the content
- Background color - A color behind the background image or content
- Margin - Space between the box and its surroundigs
Another important declaration to use is the position declaration. the position declaration defines where in space the 'box' appears.
position: relative;
or
position: absolute;
The positioning declarations tell the element where to start appearing on the page. Absolute position means the staring point is from the top left corner of the browser window while relative means that you are starting from the position of the previous element on the page.
Once you define an element's position you can then define other declarations such as width and height. Without first defining position these declarations well be ignored.
Comments
Post a Comment