How to make Website

- the idea of HTML -

Tools

  • PC
  • Text Editer(DreamWever,Webstorm etc...)
  • Graphic Tools(Photoshop,Illustrater etc...)
  • Browser(Google Chrome etc...)
  • WebSaver 
Adobe CC

Languages


  • HTML,XHTML,HTML5
  • CSS,CSS3
  • Javascript,jQuary
  • PHP,Ruby,SQL                     ...etc

HTML

  • HyperText Markup Language
    http://en.wikipedia.org/wiki/HTML
  • W3C(World Wide Web Consortium)
http://en.wikipedia.org/wiki/World_Wide_Web_Consortium
  • Google HTML/CSS Style Guide
          
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
 
 <!doctype html>
<html lang="en">




<head>
	<meta charset="UTF-8">
  	<title>Hellow World !</title>


<head>
<body>
	<h1>Hellow World !</h1>
</body>
</html>

CSS

  • Cascading Style Sheets
    http://en.wikipedia.org/wiki/CSS 
 h1 {
  font-size: 23px;
  color: #fff;
  padding-top: 6px;
  padding-left: 6px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  text-align: left;
  }

JS

  • JavaScript
http://en.wikipedia.org/wiki/Javascript
  • jQuary
http://jquery.com/

and more...
PHP,Ruby,SQL,Less,Sass

Flow

Plan-Do-Check-Action
  • Planning
  • Infomation Architect
    • Wire Frame
    • Test(Prototype)
  • Visual Design
  • Markup
    • Accessivirity
    • SearchEngineOptimaization
  • Analytics
  • Planning

Planning


Information Architecture

http://en.wikipedia.org/wiki/Information_architecture

          

Visual Design



Markup


Accessibility

http://en.wikipedia.org/wiki/Accessibility
Accessibility is the degree to which a product, device, service, or environment is available to as many people as possible. 

braille keyboard

Search Engine Optimization

http://en.wikipedia.org/wiki/Search_engine_optimization
More easy to find websites

Analytics



 

What is
the Markup?


 

To give meanings for texts
by HTML

Why?

 Do we need meanings ?

http://news.nationalgeographic.com/news/2013/09/130929-dogs-devoted-animals-pets-people-culture/

Plane Text

Amazing Stories of Devoted Dogs

A new book shows how our canine companions enrich our lives.

[Photo]

Jasmine, a rescued greyhound, cared for more than 50 animals including Bramble, an orphaned roe deer at the Nuneaton and Warwickshire Wildlife Sanctuary.

Photograph from Caters News/ZUMA Press/Newscom via National Geographic Books

We can't understand
Which is important, or not


Give Meanings

[Title]
5 Amazing Stories of Devoted Dogs

[Subtitle]
A new book shows how our canine companions enrich our lives.

[Photo]

[Caption]
Jasmine, a rescued greyhound, cared for more than 50 animals including Bramble, an orphaned roe deer at the Nuneaton and Warwickshire Wildlife Sanctuary.

[Credit]
Photograph from Caters News/ZUMA Press/Newscom via National Geographic Books

We can understand

Which is important, or not

 

And then,
we mark up...


Source Code

<div id="page_head">
<h1>5 Amazing Stories of Devoted Dogs</h1>
<h2 class="subtitle">A new book shows how our canine companions enrich our lives.</h2>		
</div>

<div id="content">
<div class="primary_photo">
<img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/720/cache/blog-promo-dog-stories_72010_600x450.jpg"  width="435" height="437" alt="A dog and a deer." />	

<div class="caption">
<p class="p1">Jasmine, a rescued greyhound, cared for more than 50 animals including Bramble, an orphaned roe deer at the Nuneaton and Warwickshire Wildlife Sanctuary.</p>
</div>

<p class="credit">Photograph from Caters News/ZUMA Press/Newscom via National Geographic Books</p>
</div>
</div>

We need markup

  • for Understandable
    for the people and programs


Texts is became more useful by Markup.

How to ...?


HTML Tags


The tags describe document content .
  • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags
  • The <!DOCTYPE> Declaration helps the browser to display a web page correctly.

    • HTML Headings



    HTML headings are defined with the <h1> to <h6> tags
    <h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>  ...

    HTML Paragraphs



    HTML paragraphs are defined with the <p> tag.
    <p>This is a paragraph.</p>
<p>This is another paragraph.</p>

    HTML Links



    HTML links are defined with the <a> tag.
     <a href="http://www.w3schools.com">This is a link</a>

    And more
    ul,li,table,td,tr,dt,dl,form etc...
     

    Demonstration

    Reference:
     http://www.w3schools.com/html/html_intro.asp

    Thank You ;-)

    https://slid.es/nobuhiroosada/

    How to make Website

    By Nobuhiro Osada

    Made with Slides.com

    How to make Website

    to lesson

    • 488

    More from Nobuhiro Osada