HTML Tutorial 1: The Basics of an Html page ,how to lay it out, and scale to screen size.
Hi guy's since alot of new users are asking about HTML 5 and how to make an HTML 5 document I figured I will make a tutorial covering the basic's so you can get started.
Ok every HTML page has a standard template or layout. On windows you can download notepad++ and on mac you can use textedit but for text edit to work you have to configure it to work with html. Textwrangler can also do it on mac.
Ok open up your text editor and type this in
<!DOCTYPEhtml>
<head>
</head>
<body>
</body>
</html>
Now if you notice for the HTML , head ,and body they start with <> and when they are typed out again they have a / so for example head starts with <head> and ends with </head> . The / slash means you ended coding for that area is done. Now add these parts and I will explain.
<!DOCTYPEhtml>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<title> My WebPage </title>
</head>
<body>
<h1> My Heading </h1>
<p> My paragraph goes here </p>
</body>
</html>
<meta name="viewport" content="width=device-width, user-scalable=no"> --- This will help your html page fit the screen size of the mobile device ,
useful when you have graphics,tables,and forms on you html page. This is not needed if your making the page for a computer.
<title> My WebPage </title>---- The <title> tag is the title of your webpage which will show on the top left of your webpage.
<h1> My Heading </h1>---- The heading will be bold and larger then your paragraph text. This will display on your webpage like the heading I have on this page HTML Tutorial 1: .
<p> My paragraph goes here </p> ---- This is where you type out the topic of your choice whether you want to make a how to guide ,story, or basically anything you want to type out.
Now go ahead if you haven't typed out the code go ahead and copy and paste the HTML and put it in your text editor. Save it with the .html for example index.html . Now double click on it and it will show on the web browser.
I made a demo with a little more functionality to it, I added a onscreen button that triggers a pop-up box when pressed. Download it here
http://sourceforge.net/projects/pfbw/files/demo.html/download
Ok every HTML page has a standard template or layout. On windows you can download notepad++ and on mac you can use textedit but for text edit to work you have to configure it to work with html. Textwrangler can also do it on mac.
Ok open up your text editor and type this in
<!DOCTYPEhtml>
<head>
</head>
<body>
</body>
</html>
Now if you notice for the HTML , head ,and body they start with <> and when they are typed out again they have a / so for example head starts with <head> and ends with </head> . The / slash means you ended coding for that area is done. Now add these parts and I will explain.
<!DOCTYPEhtml>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<title> My WebPage </title>
</head>
<body>
<h1> My Heading </h1>
<p> My paragraph goes here </p>
</body>
</html>
<meta name="viewport" content="width=device-width, user-scalable=no"> --- This will help your html page fit the screen size of the mobile device ,
useful when you have graphics,tables,and forms on you html page. This is not needed if your making the page for a computer.
<title> My WebPage </title>---- The <title> tag is the title of your webpage which will show on the top left of your webpage.
<h1> My Heading </h1>---- The heading will be bold and larger then your paragraph text. This will display on your webpage like the heading I have on this page HTML Tutorial 1: .
<p> My paragraph goes here </p> ---- This is where you type out the topic of your choice whether you want to make a how to guide ,story, or basically anything you want to type out.
Now go ahead if you haven't typed out the code go ahead and copy and paste the HTML and put it in your text editor. Save it with the .html for example index.html . Now double click on it and it will show on the web browser.
I made a demo with a little more functionality to it, I added a onscreen button that triggers a pop-up box when pressed. Download it here
http://sourceforge.net/projects/pfbw/files/demo.html/download
Tagged:
Comments
I'm trying to do HTML page but i can't open a url in a new tab (a browser the user can choose).
I do target="_blank"
What am I missing?
Michael
The Custom Page activity automatically adds the viewport metadata during the build process, so you shouldn't add it manually as you would for the HTML Archive activity.
Darryl