To participate, please log in to your Andromo App Maker account then come back here!

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

Comments

  • I made a part 2  and if you have any questions about the tutorial feel free to ask.

  • Create Your Own App with Andromo


  • Hi Pixelpower, and thank you for these tutorials :)

    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"

    I hope you'll understand my question 
    :-*
  • I will look into it but I think you can't because Andromo is using webkit instead of the actual full browser API.
  • I looked into it but there is no way currently that I found to open a web browser on the users device. Hopefully we will get access in future updates to Andromo.
  • Thanks for Check it! It's a pity, I hope also.
  • Why is it that when I add <meta name="viewport" content="width=device-width, user-scalable=no"> to my HTML code in the Source window on the Custom page it get changed to <meta content="width=device-width, user-scalable=no" name="viewport" />?

    I have tried over and over to get it to stay but it keeps moving it. Also when I test the app the page needs to be scrolled to see the other parts.

    What am I missing?

    Michael
  • Hi 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
Sign In or Register to comment.