Difference between revisions of "Learning web design (1)"

From Wiki @ Karl Jones dot com
Jump to: navigation, search
(→‎External links)
 
(3 intermediate revisions by the same user not shown)
Line 59: Line 59:
 
[[HTML elements]] are the vocabulary of the [[HTML]].
 
[[HTML elements]] are the vocabulary of the [[HTML]].
  
−
Learning HTML meaning learning the important HTML elements, and how to use them.
+
Learning HTML means learning the important HTML elements, and how to use them.
  
 
See [[HTML element]].
 
See [[HTML element]].
Line 74: Line 74:
 
These tags can act as containers.  Content between the two tags is said to be contained by the two tags.
 
These tags can act as containers.  Content between the two tags is said to be contained by the two tags.
  
−
Other tags act work alone.  These are known as empty tags.
+
Other tags work alone.  These are known as empty tags.
  
 
See [[HTML tag]].
 
See [[HTML tag]].
Line 178: Line 178:
 
* [[Learning web design (2)]]
 
* [[Learning web design (2)]]
 
* [[Web design]]
 
* [[Web design]]
 +
 +
== External links ==
 +
 +
* [https://www.youtube.com/watch?v=PVfJnltHIM4 The Complete Web Design Tutorials for Beginners in 30 Days] (YouTube)
 +
* [http://www.w3schools.com/ W3Schools] (HTML, CSS, etc.)
 +
* [http://www.wikihow.com/Get-Started-in-Web-Design How to Get Started in Web Design]
 +
* [https://webdesign.tutsplus.com/courses/web-design-for-beginners Web Design for Beginners]
 +
* [http://www.webdesignerdepot.com/2015/04/the-ultimate-guide-to-getting-started-in-web-design/ The ultimate guide to getting started in web design]
 +
* [https://css-tricks.com/get-started-web-design/ How To Get Started in Web Design]
 +
* [http://1stwebdesigner.com/learning-web-design-30-days/ Your First 30 Days of Learning Web Design: How to Get Started and Not Give Up]
 +
* [http://www.84colors.com/blog/2013/02/learning-web-design-on-your-own-getting-started/ Learning Web Design On Your Own: Getting Started]
 +
  
 
[[Category:HTML]]
 
[[Category:HTML]]
 
[[Category:Learning web design]]
 
[[Category:Learning web design]]
 
[[Category:Web design]]
 
[[Category:Web design]]

Latest revision as of 12:11, 6 December 2016

This article introduces web design for the beginner.

What is web design?

Web design is the art and craft of making web pages.

The simple aspects of web design are very simple.

But web design is a very broad subject, encompassing several different languages and a wide range of associated skills.

For the complete beginner, knowing where to start can be difficult, and knowing what to do next more difficult.

This series of articles introduces fundamental principles for the beginner, in a step-by-step manner, with code samples and practical advice.

See Web design.

Web pages

The fundamental purpose of a web page is to display text.

See Web page.

Text

Text is written language. Working with text is a primary task web design.

In this content, "text" sometimes means "text content", in order to distinguish this text from other text, such as markup languages.

See Text.

Text files

Text is commonly stored in text files.

Text files often have the .txt filename extension, although many other file extensions also represent text files, while some text files have no file extension.

See Text file.

Text editors

A text editor is a computer program which allows the user to edit text files.

See Text editor.

Markup languages

A markup language is a writing system which adds meaning to text content.

See Markup language.

HTML

HTML is a well-known markup language, widely used on the World Wide Web.

See HTML and HTML5.

HTML elements

HTML elements are the vocabulary of the HTML.

Learning HTML means learning the important HTML elements, and how to use them.

See HTML element.

HTML tags

In a web page, HTML tags represent HTML elements.

Some tags work in pairs:

  • Opening (start) tag
  • Closing (end) tag

These tags can act as containers. Content between the two tags is said to be contained by the two tags.

Other tags work alone. These are known as empty tags.

See HTML tag.

Simple web page

The code below demonstrates a simple web page using HTML5: 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Simple HTML5 page</title>
 </head>
 <body>
  <main>
   <h1>Simple web page</h1>
   <p>This is a simple web page.</p>
  </main>
 </body>
</html>

Document Declaration

The Document Declaration ("doctype") is not an HTML element. It declares the type of document.

The doctype for HTML5 is: 

<!DOCTYPE html>

html element

The html element is a container for the head element and the body element. 

<html> ... </html>

head element

The head element contains metadata about the document: 

<head> ... </head>

See header (HTML element). Not to be confused with the header element.

meta element

Meta elements specify metadata -- in this case, character set: 

<meta charset="utf-8" />

The title element must be inside the head element.

title element

Title element: 

<title>Home page - Example Site</title>

The title element must be inside the head element.

body element

The body element is a container for all page content: 

<body> ... </body>

All visible content must appear inside the body element. (The body element can also contain hidden or invisible content, such as scripts, as well.)

main element

The main element contains the main content for the page. 

<main> ... </main>

h1 element

The header 1 element indicates that the enclosed text is top-level header information: 

<h1>Simple web page</h1>

p element

The paragraph element encloses a unit of text information, just as it does in ordinary writing: 

<p>This is a simple web page.</p>

Learning web design (2)

See Learning web design (2) for further discussion of HTML elements.

See also

External links

Retrieved from "http://wiki.karljones.com/index.php?title=Learning_web_design_(1)&oldid=19828"