Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Modern Web Browser: Mozilla Firefox 3+ Google Chrome Apple Safari 4+ Opera 10+ Microsoft Internet Explorer 8

    Încărcat de

    Andrei Crișan
    65 vizualizări16 pagini
    As HTML5 is relatively new, older browsers do not understand how to read the code and turn it into a webpage correctly. HTML files are simply text files with a.html extension, so you don"t need any specialist or expensive software like Dreamweaver. Your computer comes pre-installed with software which you can write webpages in -,,Notepad" on windows, or,,TextEdit" on mac.

    Descriere originală:

    Titlu original

    Part 1

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    DOCX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    As HTML5 is relatively new, older browsers do not understand how to read the code and turn it into a webpage correctly. HTML files are simply text files with a.html extension, so you don"t need any specialist or expensive software like Dreamweaver. Your computer comes pre-installed with software which you can write webpages in -,,Notepad" on windows, or,,TextEdit" on mac.

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    65 vizualizări16 pagini

    Modern Web Browser: Mozilla Firefox 3+ Google Chrome Apple Safari 4+ Opera 10+ Microsoft Internet Explorer 8

    Încărcat de

    Andrei Crișan
    As HTML5 is relatively new, older browsers do not understand how to read the code and turn it into a webpage correctly. HTML files are simply text files with a.html extension, so you don"t need any specialist or expensive software like Dreamweaver. Your computer comes pre-installed with software which you can write webpages in -,,Notepad" on windows, or,,TextEdit" on mac.

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 16

    Modern Web Browser

    As were going to be creating our web pages using the latest standards (HTML5 and CSS3), we need a modern web browser which can understand the latest in web technologies. Versions of Microsofts Internet Explorer browser below IE8 simply wont cut it. If youre using IE7 or below, download one of the web browsers below. If youre already using a different web browser, please check it matches the minimum requirements below for best performance.

    Mozilla Firefox 3+ Google Chrome Apple Safari 4+ Opera 10+ Microsoft Internet Explorer 8

    Why do I need a certain browser? you may ask. Well, as HTML5 is relatively new, older browsers do not understand how to read the code and turn it into a webpage correctly.

    Text Editor
    HTML files are simply text files with a .html extension, so you dont need any specialist or expensive software like Dreamweaver to create them. In fact, your computer comes preinstalled with software which you can write webpages in Notepad on Windows, or TextEdit (in plain text mode) on Mac. While the software pre-installed on your computer will do, its far from the best. I recommend downloading Notepad++ if youre on Windows or TextWrangler on Mac. Both programs are completely free and offer a number of features useful to web developers, such as syntax highlighting, tabbed file editing and line numbering. For Mac users, I highly recommend purchasing either TextMate, Coda or Espresso. Windows users, try E-TextEditor.

    Introduction to HTML
    Every website on the internet is written in Hyper-Text Markup Language (HTML). The HTML language has grown and been extended over the years as the web has become more mainstream and websites find themselves requiring new features. The HTML language is maintained by the World Wide Web Consortium (W3C) and the latest specification is currently HTML 5, which has added a number of new features to the language and is helping to pave the way to more interactive and feature-rich web pages. A simple HTML page looks like:

    01 02<!doctype html> 03<html> 04 <head> <title>Hello, World!</title> 05 </head> 06 <body> 07 <p>Hello, and welcome to my website.</p> 08 </body> 09</html> 10 The above code will create the following website when opened in a web browser:

    HTML is a very simple language to learn. You are simply inserting tags within your content which outline how each bit of content should be displayed in a web browser. For example, youd insert tags into your page where you want new paragraphs of text to begin, to make text a heading within the document, to insert images, links to other pages on your site or elsewhere on the Internet etc. HTML tags are wrapped inside < > angle brackets. Looking at the previous example, you will see every tag is a pair. We have <html> at the top, and </html> at the bottom. <html> informs the web browser that everything inside the tag pair is HTML code. The </html> tag tells the browser the HTML content has ended. The slash in the last tag denotes this as the closing tag.

    NOTE: The <!doctype html> line must be included at the top of any HTML5 for it to be considered valid code. This line tells the web browser the Document Type of the rest of the pagein other words, which version of HTML the document is marked up in so that the browser can render it correctly.

    The <head> </head> section immediately following is where you place information about the webpage which will not be shown in the main page itself, but holds meta data about your page for the browser. Inside the <head> section, we have the text "Hello, World!" wrapped inside <title> </title> tags. <title> literally contains the title of the current webpage which is used by the web browser to name the window/tab:

    Following the <head> section, we have <body>. This is where the actual content for your webpage is placed. In the body we have a <p> tag with a little welcome text inside. <p> marks-up a paragraph on your page. For example:
    ?

    1<p>Once upon a time in a land far, far away there lived a princess who 2lived happily ever after.</p> 3 4<p>The End.</p> Marks-up two paragraphs of text. If we were to view that in a browser, well see the following:

    You may be wondering why we need these <p> and </p> tags to display a paragraph. Well, if we didnt, and wrote the webpage like this:
    ?

    1Once upon a time in a land far, far away there lived a princess who lived 2happily ever after. 3 4The End. The page will look like this in a browser:

    As you can see, the browser ignores any formatting we make in the file. We could write our example webpage as follows and it will display the same in the browser:
    ?

    1<!doctype html><html><head><title>Hello, welcome to my World!</title></head><body><p>Hello, and 2website</p></body></html>

    The browser is only interested in what the HTML tags tell it to do. It will ignore any whitespace you include in the document (extra spaces, tabs, new lines etc.)

    Creating a simple web-page

    Now you understand the very basics of HTML, lets make our first ever webpage! The image above is what this page will eventually look like. Create a new folder somewhere on your computer and name it html-from-scratch. Using your preferred text editor, create a new blank file and save it in this folder as my-firstwebpage.html. Enter the following in file:
    ?

    01 02<!doctype html> 03<html> 04 <head> <title>HTML From Scratch</title> 05 </head> 06 <body> 07 <!-- content goes here --> 08 </body> 09</html> 10

    The above is a basic HTML 5 file layout. Weve declared the Document Type on the first line, opened our <html> and <head> tags and set HTML From Scratch as the title for the page. We then close the head and open the body. On line 7 we have included a comment. Use comments to leave extra info in your code which wont be displayed in your webpage. Mark-up a comment by wrapping your text inside <! and > tags. Finally, we close off our opened body and html tags to finish the document.

    Header
    Remove the <! content goes here > line from your source code and type out the following:
    ?

    1 2<header> <h1>HTML From Scratch</h1> 3</header> 4 The <header> tag is a new element introduced in HTML5 which exists to mark-up and structure the header section of a webpage. The header is the top section of a webpage, usually where the sites name is. Prior to HTML5 we used <div id="header"> and </div> (or something similar), but I wont go into details about older specifications of HTML as were learning the latest standard. IMPORTANT: <header> is not to be confused with <head>. They are both completely different tags. Inside our header we include a <h1> tag. H1 is used to mark-up the main heading on your page (in this case, the name of our site). HTML contains header tags from 1-6, with <h1> being the largest, most-important title on the page down to <h6>.

    Navigation
    Next, well mark-up the navigation menu for the website. Following the closing </header>, type out the following:
    ?

    1 2<nav> 3 <ul> <li>Home</li> 4 <li>Nettuts</li> 5 <li>Google</li> 6 </ul> 7</nav> 8 This chunk of code may appear a little scary, but lets break it down. The block above marksup a navigation area (<nav>) which contains an unordered list (<ul>) with three list items (<li>). <nav> is a new HTML5 element for marking-up a navigation area on a website. This is typically used to hold the main navigation menu for your website, however since were only creating a single web-page right now, well just make a link to Nettuts and Google. <ul> creates a bullet-point list, and each <li> item (list item) is a new bullet-point in the list. Save your file, and open my-first-webpage.html in your web browser. You should see this:

    As you can see, the <title> tag is working correctly, the <h1> tag displays a large title at the top of the page, and our bullet-point navigation list is displaying correctly. You may notice that we have one problem with our navigation list right now: the items arent hyper-links and so they arent clickable. To fix this, change the three list items (<li>) to:
    ?

    01 02<li> 03 <a href="my-first-webpage.html">Home</a> 04</li> 05 06<li> href="http://net.tutsplus.com">Nettuts</a> <a 07</li> 08 09<li> 10 <a href="http://www.google.com">Google</a> 11</li> 12 Inside each of our <li> list items, weve made the text into hyper-links. The <a> tag creates an anchor a hyper-link to another page on your website or another location on the Internet. For the anchor tag to actually link somewhere, we provide it with the address to link to inside an href parameter. Parameters go inside the opening tag (<a href=""></a>). On our webpage, the Home link goes to the current page (my-first-webpage.html), Nettuts goes to Nettuts (http://net.tutsplus.com) and the Google link goes to, you guessed it, Google.

    Main Content
    Following the </header> tag, type out the following:
    ?

    1<section> 2 <p>This is the main content for my website.<br /> 3 Here is some stuff about me:</p> 4 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada 5fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies 6eget, tempor sit amet, ante.</p> 7</section> The <section> tag is also new in HTML5 (we used to use something like <div id="content">) and literally creates a section of content on the webpage. In this case, were using <section> to mark-up the main section of the page where our content goes. Inside, we have two paragraphs containing random text. Notice in the first paragraph we have a <br /> tag. This is a line break; in other words, the text following it will display on a new line, but in the same paragraph. The <br /> tag is special as it does not have a closing tag. Instead, the closing forward-slash (/) is included at the end of the tag. This is because a line-break contains no content, it exists purely for aesthetic purposes, otherwise wed be writing <br></br> which is a little pointless. Several other tags are also self-closing, such as <img /> and <hr />, which well look at later.

    Images
    Inside your html-from-scratch folder, create a new folder named images. Save the image below into that folder (right-click, Save Image As):

    Now, back inside the main content for the website, before the closing </section> tag, enter the following to insert the image on our page:
    ?

    1<img src="http://tutsplus.s3.amazonaws.com/tutspremium/webdevelopment/076_beginnerWebDesign/part1/images/envato-stock.jpg" 2alt="Envato Stock Image" />

    The <img /> tag, like the anchor tag, is self-closing and accepts most of its contents as parameters in the opening tag. src= stands for source (the path to the image). The image could be stored somewhere elsewhere on the Internet, or locally with the webpage. Here, weve set the tag to display the image we saved in our images directory. alt= contains the Alternative Text which will be displayed if the image fails to load. You usually briefly describe the image here. Take a look at the page now. The image should display:

    The Sidebar

    Next, lets mark-up the sidebar of our webpage. Enter the following after the closing </section> tag:
    ?

    01 02<aside> <hr /><h2>Sidebar</h2> 03 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada 04fames ac turpis egestas:</p> 05 <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 06 <li>Aliquam tincidunt mauris eu risus.</li> 07 <li>Vestibulum auctor dapibus neque.</li> 08 </ul> 09</aside> 10 <aside> is a HTML5 tag for marking-up a section of your webpage set aside of the main content, such as a sidebar, which contains less-important information content than the main section of the page. Inside our sidebar, we have a third-level heading (H3) titled Sidebar, a paragraph containing some random place-holder text and then an unordered list with 3 items. Take a look at your page, and you should see the above content directly below what we placed in the <section> tag. Dont worry that the sidebar isnt actually a sidebar yet, this is the way HTML was designed. More on that shortly.

    The Footer
    In the footer, the very bottom, of our website, we will include a small copyright notice. Some websites take their footer a little further and other details such as a sitemap.
    ?

    1 2<footer> 3 <p> Copyright &copy; Your Name 2010.<br /> 4 Part of a tutorial for <a href="http://net.tutsplus.com">Nettuts+</a>. 5 </p> 6</footer> 7

    <footer> is also a new tag introduced in HTML5. Youre probably getting the hang of this now, and should notice weve included a paragraph in the footer containing our copyright notice and a line break, followed by a link back to Nettuts. NOTE: See that &copy; in our footer? Thats a HTML entity. This entity will display a copyright symbol () when rendered in the browser. Read more on HTML character entities on Wikipedia.

    In Part 2
    That concludes the first part of this series. In just a short space of time, youve already accomplished quite a lot! Youve learnt a number of basic HTML tags, and hand-coded your first webpage. In the next part, well be learning how to use HTMLs partner-in-crimeCSSto make the webpage look nice, and turn the basic, un-styled page above into our final product:

    S-ar putea să vă placă și