Saturday, September 9, 2017

HTML Responsive Web Design

What is Responsive Web Design?

Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).
Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen:

Note: A web page should look good, and be easy to use, regardless of the device!

Create Your Own Responsive Design

One way to create a responsive design, is to create it yourself:

Example

<!DOCTYPE html>

<html lang="en-us">

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
.city {

    
 float: left;
    margin: 5px;
    padding: 15px;
    max-width: 300px;
    height: 
 300px;
    border: 1px solid black;} </style>

</head>

<body>



<h1>Responsive Web Design Demo</h1>



<div class="city">

  
 <h2>London</h2>

  <p>London is the capital city of England.</p>

  
 <p>It is the most populous city in the United Kingdom, with a 
 metropolitan area of over 13 million inhabitants.</p>

</div>



<div 
 class="city">

  <h2>Paris</h2>

  <p>Paris is 
 the capital of France.</p> 

  <p>The Paris area is one of the largest 
 population centers in Europe, with more than 12 million 
 inhabitants.</p>

</div>



<div class="city">

  
 <h2>Tokyo</h2>

  <p>Tokyo is the capital of Japan.</p>

  <p>It 
 is the center of the Greater Tokyo Area,  and the most populous 
 metropolitan area in the world.</p>

</div>



<div class="city">

  <h2>New York</h2>

  <p>The City of New York is the most populous city in the United States.</p>

  <p>New
 York is an important center for international diplomacy and has been 
described as the cultural and financial capital of the world.</p>

</div>



</body>

</html>

Using W3.CSS

Another way to create a responsive design, is to use a responsive style sheet, like W3.CSS
W3.CSS makes it easy to develop sites that look nice at any size; desktop, laptop, tablet, or phone:

tham khảo

https://www.pinterest.com/explore/web-layout/

w3 demo layout

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}
  
nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
</style>
</head>
<body>

<div class="container">

<header>
   <h1>City Gallery</h1>
</header>
  
<nav>
  <ul>
    <li><a href="#">London</a></li>
    <li><a href="#">Paris</a></li>
    <li><a href="#">Tokyo</a></li>
  </ul>
</nav>

<article>
  <h1>London</h1>
  <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>

<footer>Copyright &copy; W3Schools.com</footer>

</div>

</body>
</html>

Friday, August 12, 2016

CSS Layout - The display Property

« Previous

Next Chapter »

The display property is the most important CSS property for controlling layout.

The display Property

The display property specifies if/how an element is displayed.
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.

Click to show panel

This panel contains a <div> element, which is hidden by default (display: none).
It is styled with CSS, and we use JavaScript to show it (change it to (display: block).

Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The <div> element is a block-level element.

Examples of block-level elements:

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.
This is an inline <span> element inside a paragraph.
Examples of inline elements:

<span>
<a>
<img>

Display: none;

display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. Take a look at our last example on this page if you want to know how this can be achieved.
The <script> element use display: none; as its default.

Override The Default Display Value

As mentioned, every element has a default display value. However, you can override this.
Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards.
A common example is making inline <li> elements for horizontal menus:

Example

li {
display: inline;}

Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.

The following example displays <span> elements as block elements:

Example

span {
display: block;}

The following example displays <a> elements as block elements:

Example

a {
display: block;}

Hide an Element - display:none or visibility:hidden?

Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there:

Example

h1.hidden {
display: none;}

visibility:hidden; also hides an element.
However, the element will still take up the same space as before. The element will be hidden, but still affect the layout:

Example

h1.hidden {
visibility: hidden;}

Wednesday, August 10, 2016

some layout tips

center an element:
style="margin:auto;"

set a div that only fit its contents:
style="display:inline-block;"

div without content have width:
insert   into the div

Using DIV and CSS to make a table

In modern web development I'm coming across this pattern ever more often. It looks like this:

<div class="table">
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</div>

And in CSS there is something like:

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }

HTML div Tag

Example

A section in a document that will be displayed in blue:

<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
Try it Yourself »

Definition and Usage

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used to group block-elements to format them with CSS.

Browser Support

Element

<div> Yes Yes Yes Yes Yes

Element
<div>	Yes	Yes	Yes	Yes	Yes

Tips and Notes

Tip: The <div> element is very often used together with CSS, to layout a web page.

Note: By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.

Differences Between HTML 4.01 and HTML5

The align attribute not supported in HTML5.

Attributes

Attribute Value Description

align left
right
center
justify Not supported in HTML5.
Specifies the alignment of the content inside a <div> element

Saturday, September 9, 2017

HTML Responsive Web Design

What is Responsive Web Design?

Create Your Own Responsive Design

Example

Using W3.CSS

tham khảo

w3 demo layout

Friday, August 12, 2016

CSS Layout - The display Property

The display Property

Block-level Elements

Inline Elements

Display: none;

Override The Default Display Value

Example

Example

Example

Hide an Element - display:none or visibility:hidden?

Example

Example

Wednesday, August 10, 2016

some layout tips

Using DIV and CSS to make a table

HTML div Tag

Example

A section in a document that will be displayed in blue: <div style="color:#0000FF"> <h3>This is a heading</h3> <p>This is a paragraph.</p> </div> Try it Yourself »

Definition and Usage

The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS.

Browser Support

Element <div>YesYesYesYesYes

Tips and Notes

Tip: The <div> element is very often used together with CSS, to layout a web page. Note: By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.

Differences Between HTML 4.01 and HTML5

The align attribute not supported in HTML5.

Attributes

AttributeValueDescription alignleft right center justifyNot supported in HTML5. Specifies the alignment of the content inside a <div> element

A section in a document that will be displayed in blue:

<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
Try it Yourself »

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used to group block-elements to format them with CSS.

Element

<div> Yes Yes Yes Yes Yes

Tip: The <div> element is very often used together with CSS, to layout a web page.

Note: By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.

Attribute Value Description

align left
right
center
justify Not supported in HTML5.
Specifies the alignment of the content inside a <div> element