0
Beginning HTML 
Web Design 101-         HTML Coding Basics• HTML code looks much scarier than it is.  The letters stand fo...
Beginning HTML 
Web Design 101-         HTML Coding Basics• In our first HTML coding lesson, well use html tags to  specif...
Beginning HTML 
Web Design 101-         HTML Coding Basics• Step 1: Open Notepad.  – Note: For OSX users, change the prefe...
Beginning HTML 
Web Design 101-          HTML Coding Basics• Step 2: Type the following text, just as you see it:<html><he...
Beginning HTML 
Web Design 101-          HTML Coding Basics• Step 3: Save the file as "first.html"   – (remember where you...
Beginning HTML 
Web Design 101-          HTML Coding Basics• Where’s all the other stuff I typed?  – Stuff in the header s...
Beginning HTML 
Web Design 101-          HTML Coding Basics• <html></html>  – This html tag tells the browser that its goi...
Creative Commons License• This work is licensed under the Creative  Commons Attribution 3.0 Unported License.  To view a c...
Upcoming SlideShare
Loading in...5
×

Web design 101

356

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
356
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Web design 101"

  1. 1. Beginning HTML 
Web Design 101- HTML Coding Basics• HTML code looks much scarier than it is. The letters stand for: – Hyper Text Markup Language• but its really just a way to get text onto the web.
  2. 2. Beginning HTML 
Web Design 101- HTML Coding Basics• In our first HTML coding lesson, well use html tags to specify different elements of a web page. These html tags are surrounded by angle brackets – i.e. <html>• and usually come in pairs – i.e. <html></html>.• The first one begins the element, the second one, with the slash, ends it.
  3. 3. Beginning HTML 
Web Design 101- HTML Coding Basics• Step 1: Open Notepad. – Note: For OSX users, change the preferences from "Rich text" to "Plain text". Then choose "Ignore rich text commands in HTML files". Otherwise, your HTML might not work correctly.
  4. 4. Beginning HTML 
Web Design 101- HTML Coding Basics• Step 2: Type the following text, just as you see it:<html><head><title>The Best Page Ever!</title></head><body>I just made my very first page. Im cool.</body></html>
  5. 5. Beginning HTML 
Web Design 101- HTML Coding Basics• Step 3: Save the file as "first.html" – (remember where you save it so you can find again).• Step 4:Next, open your browser, go to the File menu, then click "Open". Youll see a dialog box where you can Browse for the file you just made "first.html". Select that file and either double-click it or click "Open". Then click OK, and voila, the browser should be displaying your fabulous new page.
  6. 6. Beginning HTML 
Web Design 101- HTML Coding Basics• Where’s all the other stuff I typed? – Stuff in the header section of webpages isnt seen by you or your visitors, its meant for search engines and browsers. With this in mind, you wont see the title in the main area of your webpage, but if you look at the top of your browser window, youll see it there.
  7. 7. Beginning HTML 
Web Design 101- HTML Coding Basics• <html></html> – This html tag tells the browser that its going to read an HTML page. The first tag is the start tag, the second one is the end. Everything on your webpage needs to go between these guys.• <head></head> – This is called the Header. Its where meta-tags reside along with other optional info (scripts and CSS link path)• <body></body> – This is the Body of the page which contains the actual content 
(text, graphics and other elements).
  8. 8. Creative Commons License• This work is licensed under the Creative Commons Attribution 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by/3. 0• http://www.websitebeginner.com
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×