Theme Layout

Boxed or Wide or Framed

Wide

Theme Translation

Display Featured Slider

Featured Slider Styles

Display Grid Slider

yes

Grid Slider Styles

Display Trending Posts

Display Author Bio

Display Instagram Footer

off

Dark or Light Style

Light

Blog Archive

Powered by Blogger.
Navigation Menu

All rights reserved
komorebi 2016

Tuesday, February 28, 2017

[HTML5] URL Encoding

1:25:00 PM
to Read (
Words)

# HTML Uniform Resource Locators

A URL is another word for a web address. A URL can be composed of words, or an Internet Protocol ( IP ) Address ( 192.68.20.50).
Most people enter the name when surfing, because names are easier to remember than numbers.

● URL - Uniform Resource Locator

 Web browsers request pages from web servers by using a URL.
A Uniform Resource Locator ( URL ) is used to address a document on the web.
A web address follows these syntax rules.

schme://prefix.domain:port/path/filename

  • scheme - defines the type of Internet service (most common is http or https)
  • prefix - defines a domain prefix (default for http is www)
  • domain - defines the Internet domain name (like w3schools.com)
  • port - defines the port number at the host (default for http is 80)
  • path - defines a path at the server (If omitted: the root directory of the site)
  • filename - defines the name of a document or resource

● Common URL Schemes

 The table below lists some common schemes.

● URL Encoding

 URLs can only be sent over the Internet using the ASCII character-set. If a URL contains characters outside the ASCII set, the URL has to be converted.
URL encoding converts non-ASCII characters into a format hat can be transmitted over the internet.
URL encoding replaces non-ASCII characters with a "%" followed by hexadecimal digits.
URLs can not contain spaces. URL encoding normally replaces a space with a plus sign, or %20.

QuickEdit
Unknown
0 Comments
Share This Post :

[HTML5] Encoding ( Character Sets )

1:13:00 PM
to Read (
Words)

# HTML Encoding

● Character Encoding

 ASCII was the first character encoding standard. ASCII defined 127 different alphanumeric characters that could be sued on the internet. numbers, English letters, and some special characters like ! $ + - ( ) @ < > .
ANSI (Windows-1252) was the original Windows character set, with support for 256 different character codes.
ISO-8859-1 was the default character set for HTML4. This character set also supported 256 different character codes.
Because ANSI and ISO-8859-1 were so limited, the default character encoding was changed to UTF-8 in HTML5.
UTF-8 ( Unicode ) covers almost all of the characters and symbols in the world.

● The HTML Charset Attribute

 To display an HTML page correctly, a web browser must know the character set used in the page.
This is specified in the <meta> tag.

QuickEdit
Unknown
0 Comments
Share This Post :

[HTML5] Symbols

12:46:00 PM
to Read (
Words)

# HTML Symbol 

● HTML Symbol Entities

 HTML entities were described in the previous chapter.
Many mathematical, technical, and currency symbols, are not present on a normal keyboard.
To add such symbols to an HTML page, Designer use an HTML entity name.

● Some Mathematical Symbols Supported by HTML


QuickEdit
Unknown
0 Comments
Share This Post :

[HTML5] Entities

12:36:00 PM
to Read (
Words)

# HTML Entities

● HTML Entities

 Some characters are reserved in HTML. If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.
Character entities are used to display reserved characters in HTML.
To display a less than sign (<) we must write: &lt; or &#60;

● Non - breaking Space.

 A common character entity used in HTML is the non-breaking space: &nbsp.
A non-breaking space is a space that will not break into a new line.
Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive.

● Some Other Useful HTML Character Entities

https://www.w3schools.com/html/html_entities.asp

● Combining Diacritical Marks

 A diacritical mark is a "glyph" added to a letter.
Some diacritical marks, like grave(`) and acute(') are called accents.
Diacritical marks can appear both above and below a letter, inside a letter, and between two letters.
Diacritical marks can be used in combination with alphanumeric characters, to produce a character that is not present in the character set used in the page.
https://www.w3schools.com/html/html_entities.asp

QuickEdit
Unknown
1 Comments
Share This Post :

[HTML5] Responsive Web Design

12:15:00 PM
to Read (
Words)

# HTML Responsive Web Design

● Responsive Web Design

 Responsive Web Design makes webpage look good on all devices.
 This is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.


QuickEdit
Unknown
0 Comments
Share This Post :

[HTML5] Layouts

12:06:00 PM
to Read (
Words)

# HTML Layouts

● HTML Layout Elements

 Websites often display content in multiple columns. HTML5 offers new semantic elements that define the different parts of a web page.
https://www.w3schools.com/html/html_layout.asp
  • <header> - Defines a header for a document or a section
  • <nav> - Defines a container for navigation links
  • <section> - Defines a section in a document
  • <article> - Defines an independent self-contained article
  • <aside> - Defines content aside from the content (like a sidebar)
  • <footer> - Defines a footer for a document or a section
  • <details> - Defines additional details
  • <summary> - Defines a heading for the <details> element

● HTML Layout Techniques

 There are 4 different ways to create multicolumn layouts. Each way has its pros and cons.

  • HTML tables
  • CSS float property
  • CSS framework
  • CSS flexbox

● CSS Floats

 It is common to do entire web layouts using the CSS float property.
 Floating elements are tied to the document flow, which may harm the flexibility.

● CSS Flexbox

 Flexbox is a new layout mode in CSS3.
 Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.


QuickEdit
Unknown
1 Comments
Share This Post :

Monday, February 27, 2017

[HTML5] Head

3:26:00 PM
to Read (
Words)

# HTML Head

● The HTML <head> Element

 The <head> element is a container for metadata and is placed between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, links, scripts, and other meta information.

● The HTML <title> Element

 The <title> element defines the title of the document, and is required in all HTML/XHTML documents.
The <title> element.

  • defines a title in the browser tab
  • provides a title for the page when it is added to favorites
  • displays a title for the page in search engine results

● The HTML <meta> Element

 The <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata.

 Metadata is used by browsers, by search engines, and other web services.

● Setting The Viewport

 HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. The Viewport is the user's visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen. Designer should include the following <meta> viewport element in all web pages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device.
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

● The HTML <base> Element

 The <base> element specifies the base URL and base target for all relative URLs in a page.

● Omitting <html>,<head> and <body>.

 According to the HTML5 standard, the <html>, the <body> and the <head> tag can be omitted.

● HTML head Elements


QuickEdit
Unknown
0 Comments
Share This Post :

[HTML5] Iframes

2:07:00 PM
to Read (
Words)

# HTML Iframes

● Iframe Syntax

 An HTML iframe is used to display a web page within a web page.
 This is defied with the <iframe> tag.
<iframe src="URL"></iframe>

● Iframe - Set Height and Width

 Use the height and width attributes to specify the size of the iframe.
The attribute values are specified in pixels by default, but they can also be in percent.

● Iframe - Remove the Border

 By default, an Iframe has a border around it.
To remove the border, add the style attribute and use the CSs border property.

With CSS, programmer can also change the size, style and color of the iframe's border.

● Iframe - Target for a Link

 An iframe is used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe.

QuickEdit
Unknown
0 Comments
Share This Post :

[HTML5] Classes

1:48:00 PM
to Read (
Words)

# HTML The class Attribute

● Using The class Attribute

The HTML class attribute makes it possible to define equal styles for elements with the same class name.

● Using The class Attribute

The HTML class attribute is used for inline element.



QuickEdit
Unknown
0 Comments
Share This Post :

[HTML5] Blocks

1:33:00 PM
to Read (
Words)

# HTML Blocks

● HTML Block and Inline Elements

Every HTML element has a default display value depending on what type of element it is.
The default display value for most elements is block or inline.

● Block - Level Elements

 A block-level element always starts on a new line and takes up the full width available.

● Inline Elements


 An inline element does not start on a new line and only takes up as much width as necessary.

● The <div> Element

 The <div> element is often used as a container for other HTML elements. It has no required attributes, but both style and class are common.
When used together with CSS, The <div> element can be used to style blocks of content.


● The <span> Element

 The <span> element is often used as a container for some text. this element has no required attribute, but both style and class are common. 
When used together with CSS, the <span> element can be used to style parts of the text.

● HTML Grouping Tags

 <div> tag defines a section in a document (block-level).
 <span> tag defines a section in a document (Inline).
QuickEdit
Unknown
0 Comments
Share This Post :

[HTML5] Lists

1:16:00 PM
to Read (
Words)

# HTML Lists

● Unordered HTML List

An unordered list starts with the <ul> tag. EAch list item starts with the <li> tag.
The list items will be marked with bullets by default.

● Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker.
https://www.w3schools.com/html/html_lists.asp

● Ordered HTML List

 An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default.

● Ordered HTML List - The Type Attribute

 The type attribute of the <ol> tag, defines the type of the list item maker.
https://www.w3schools.com/html/html_lists.asp

● HTML Description Lists

 HTML supports description lists.
A description list is a list of terns, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term, and the <dd> tag describes each term.

● Nested HTML Lists

 Lists can be nested.

● Horizontal Lists

 HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a menu.

QuickEdit
Unknown
0 Comments
Share This Post :

Sunday, February 26, 2017

[HTML] Tables

12:36:00 PM
to Read (
Words)

# HTML Tables

● Defining an HTML Table

 An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag.
By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

● HTML Table - Adding a Border

 If programmer do not specify a border for the table, it will be displayed without borders. A border is set using the CSS border property.

● HTML Table - Collapsed Borders

 If programmer want the borders to collapse into one border, add the CSS border-collapse property.

● HTML Table - Adding Cell Padding

 Cell padding specifies the space between the cell content and its borders.
If programmer do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property.

● HTML Table - Left-align Headings

 By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property.

● HTML Table - Adding Border Spacing

 Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property.

● HTML Table - Cells that Span Many Columns

 To make a cell span more than one column, use the colspan attribute.

● HTML Table - Cells that Span Many Rows

 To make a cell span more than one row, use the rowspan attribute.

● HTML Table -Adding a Caption

 To add a caption to a table, use the <caption> tag.

● A Special Style for One Table

 To define a special style for a special table, and an id attribute to the table.

And add more styles.

QuickEdit
Unknown
0 Comments
Share This Post :

Saturday, February 25, 2017

[HTML5] Images

11:25:00 AM
to Read (
Words)

# HTML Images

● HTML Images Syntax

 In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL of the image.

https://www.w3schools.com/html/html_images.asp

● The alt Attribute

 The alt attribute provides an alternate text for an image, if the user for some reason cannot view it.
If a browser cannot find an image, it will display the value of the alt attribute.


The alt attribute is required. A web page will not validate correctly without it.

● HTML Screen Readers


 A screen reader is a software program that reads the HTML code, converts the text, and allows the user to "listen" to the content. Screen readers are useful for people who are blind, visually impaired, or learning disabled.

● Image Floating

 Use the CSS float property to let the image float to the right or to the left of a text.

● Image Maps

 Use the <map> tag to define an image-map. An image-map is an image with clickable areas.
The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
The <map> tag contains a number of <area> tags, that defines the clickable areas in the image-map

https://www.w3schools.com/html/html_images.asp


QuickEdit
Unknown
0 Comments
Share This Post :

[HTML5] Links

10:40:00 AM
to Read (
Words)

# HTML Links

● HTML Links - HyperLinks

 HTML Links are hyperlinks. User can click on a link and jump to another document. When user move the mouse over a link, the mouse arrow ill turn into a little hand.

● HTML Links - Syntax

 In HTML, links are defined with the <a> tag.


The href attribute specifies the destination address of the link. The link text is the visible part. Clicking on the link text will send user to the specified address.

● Local Links


 The example above used an absolute URL. A local link is specified with a relative URL.




● HTML Link Colors

 By default, a link will appear like this.
  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

Programmer can change the default colors, by using styles.



● HTML Links - The target Attribute

 The target attribute specifies where to open the linked document.
The target attribute can have one of the following values.
  • _blank - Opens the linked document in a new window or tab
  • _self - Opens the linked document in the same window/tab as it was clicked (this is default)
  • _parent - Opens the linked document in the parent frame
  • _top - Opens the linked document in the full body of the window
  • framename - Opens the linked document in a named frame

● HTML Links - Image as Link

 It is common to use image as links.

● HTML Links - Create a Bookmark

 HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks can be useful if your webpage is very long.
To make a bookmark, you must first create the bookmark, and then add a link to it.
When the link is clicked, the page will scroll to the location with the bookmark.

● External Paths

 External pages can be referenced with a full URL or with a path relative to the current web page.

QuickEdit
Unknown
0 Comments
Share This Post :
Subscribe to: Posts (Atom)

Follow @SunriseSunsetBlog