Results 1 to 7 of 7

Thread: [RESOLVED] Help getting started coding HTML

  1. #1

    Thread Starter
    Lively Member
    Join Date
    Nov 2016
    Posts
    125

    Resolved [RESOLVED] Help getting started coding HTML

    My VS studies have faltered at the web chapter/HTML coding. I am using VS Community 2017 to writing HTML code but I am having difficulty adapting VS to my textbook examples; it talks about creating root level directory, asset directory (img, css, js as subdirectories) and then a home directory index.html.
    With the above setup, graphics are found. Not so in my VS coding. I have yet to learn how to find images in my App-Data folder or my Resource folder. I think I need guidance on how to structure my project. TIA JP

  2. #2
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,712

    Re: Help getting started coding HTML

    In web development, HTML is the content of your webpage. You structure the content by using HTML tags where each tag represents some form of semantics. I think the best way to learn is from examining an example, so take the following code:
    HTML Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>HTML Example</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
      </head>
      <body>
        <h1>Example Website</h1>
        <p>The following demonstrates a simple HTML example.</p>
        <ol>
          <li>Nested list item(li) #1</li>
          <li>Nested list item(li) #2</li>
          <li>Nested list item(li) #3</li>
        </ol>
      </body>
    </html>
    Fiddle: https://codepen.io/anon/pen/awpBZe

    The very first line is the HTML document type, it doesn't get displayed on the webpage, but it does inform the browser what version of HTML the webpage is using (in this case the latest, HTML5).

    The root element is <html> which indicates to the browser that what is being rendered on the screen is an HTML document and should be treated as such.

    The first child element is <head>. Nothing in the <head> element gets displayed on the webpage. Instead it gives the browser important data about the HTML document. For example, the first child element of the <head> tag is a <title> tag, a <title> tag is what gets displayed on the web browser's tab. The second child element of the <title> tag is a <link> tag, this is also the first (and only element) that doesn't have an ending </link> tag and this is because some HTML elements can be represented as <[name] />, but anyways the <link> tag actually points to where the HTML document's CSS file is located (in this case the same folder as the HTML file and its name is stylesheet.css).

    The second child element is <body>. Everything in the <body> element gets displayed on the webpage, unless you hide it using CSS or some other means (like JavaScript). The first child element of the <body> is the <h1> tag, a <h1> tag is a heading tag which makes the text larger and in bold. There are <h1> to <h6> where each subsequent number makes the text smaller and smaller. The second child element of the <body> is the <p> tag, a <p> tag is a paragraph tag which represents text at the "normal" or root font style. Finally the last child element is an <ol> tag which represents and ordered list of 1, 2, 3, etc. in this case it contains three child elements which are <li>'s or list items.

    The remainder of the code ends the <body> and ends the <html> elements.

    What I would suggest that you do is visit https://www.w3schools.com/html/ and familiarize yourself with the basics and some of the various DOM elements (these are the tags like <h1>, <p>, etc.). HTML is very simple to understand because technically, there is no programming, just markup. All it takes is practice to get use to it. Also, if you noticed, I provided you an example in a link called a fiddle. A fiddle is essentially a "playground" in which you can test code on the fly and it will render the results immediately.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  3. #3

    Thread Starter
    Lively Member
    Join Date
    Nov 2016
    Posts
    125

    Re: Help getting started coding HTML

    Thanks for the reply. My problem is not the coding - my textbooks are guiding me on that. My problem is how to test code either in VS Com 2017 or ?? browser. When using VS, how to get name index.html functionality with subdirectories 'img' for images, 'css' for cascading style sheet and 'js' for Java script. I've done project renaming before but I am unsure how to proceed in this situation. I also explored using MS word for text coding and saving as index.html under project name (folder) Lesson1. This approached facilitated the subdirectories but how to transport to a viable browser test bed - tried Chrome but not able to establish browsing there either. TIA jp

  4. #4
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,712

    Re: Help getting started coding HTML

    You can literally use any text editor such as Notepad, Notepad++, Word, WordPad, etc. so long as you save the file with a .html extension.

    When you save the file, if you launch it then it will open in your default browser. If you right-click and click on "open with" then you can specify the browser. If you use Notepad++ then it will give you the option to run the file in the 4 common browsers (assuming that you have them installed).

    In terms of how to link your files to the subdirectories, assume that you have the following structure:
    Code:
    Folder: project_name
    -File: index.html
    -Folder: imgs
    --File: image1.jpg
    --File: image2.jpg
    --File: image3.jpg
    -Folder: css
    --File: stylesheet.css
    -Folder: js
    --File: script.js
    Then in your HTML file you'd reference the folder and then file name:
    HTML Code:
    <head>
      <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
      <script src="js/scripts.js"></script>
    </head>
    <body>
      <img alt="image1" src="img/image1.jpg" />
      <img alt="image2" src="img/image2.jpg" />
      <img alt="image3" src="img/image3.jpg" />
    </body>
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  5. #5

    Thread Starter
    Lively Member
    Join Date
    Nov 2016
    Posts
    125

    Re: Help getting started coding HTML

    This project has images stored in folder img, but img does not show up in the Solution Explorer nor do the images in the web page during testing. I would like to know where I am erroring with placement of the img folder. TIA jp

    Project directory entries
    Code:
    Project for the Web
      Bristo
        .vs
        Bristo
          App-Data
          App_Start
          bin
          Content
          fonts
          img
       My Project
    ..   obj
         Scripts
       Packages
    The HTML code as listed in in VS folder index.html which has been set as start page.
    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
        
        <meta charset=”utf-8>
        <title> Black Goose Bistro </title>
    </head>
    
    <body>
        <h1><img src="blackgoose.png" alt="BLACK GOOSE BISTRO" />Black Goose Bistro</h1>
    
     
        <h2>The Restaurant</h2>
    
        
        <p>The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere.
            Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight
            The menu changes regularly to highlight the freshest ingredients.
        </p>
        <h3><em>Catering</em></h3>
        <p>
            You have fun... we'll handle the cooking. Black Goose Catering can handle events from snacks for bridge club to elegant corporate fundraisers.
            <h3><em>Location and Hours</em></h3>
            Seekonk, Massachusetts;
            Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight
        </p> 
    </body>
    
    </html>
    <small>Copyright 2011, Jennifer Robbins</small>

  6. #6
    PowerPoster PlausiblyDamp's Avatar
    Join Date
    Dec 2016
    Location
    Pontypool, Wales
    Posts
    2,458

    Re: Help getting started coding HTML

    If the images are in the folder called img then you would need to include this in the path to the image e.g.
    Code:
     <h1><img src="blackgoose.png" alt="BLACK GOOSE BISTRO" />Black Goose Bistro</h1>
    should be
    Code:
     <h1><img src="img/blackgoose.png" alt="BLACK GOOSE BISTRO" />Black Goose Bistro</h1>
    If the files aren't appearing in solution explorer they might not be part of the project, if you click on the project name in solution explorer there should be a button called "Show All files" at the top of solution explorer, click this and you should be able to see them.

  7. #7

    Thread Starter
    Lively Member
    Join Date
    Nov 2016
    Posts
    125

    Re: Help getting started coding HTML

    Thank you so very much - it works now! I feared that it might have been because I was using my PC as a local host. Thanks again JP

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width