Scribd Logo
Upload

Welcome to Scribd!

  • BWD Lab-1 en

    Uploaded by

    Era
    16 views5 pages
    This document provides instructions for 3 tasks to complete a basic web design laboratory exercise using the WebStorm IDE. The first task is to create an HTML 4 project called "Lab1" with a file called "Lab1-1" containing sample HTML tags. The second task is to create another HTML 4 file "Lab1.2" in the same project containing code with errors to detect and correct. The third task is to create two HTML pages, with the first redirecting to the second after 5 seconds, and both pages containing sample text and meta tags.

    Original Description:

    Original Title

    BWD_Lab-1_en

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides instructions for 3 tasks to complete a basic web design laboratory exercise using the WebStorm IDE. The first task is to create an HTML 4 project called "Lab1" with a file called "Lab1-1" containing sample HTML tags. The second task is to create another HTML 4 file "Lab1.2" in the same project containing code with errors to detect and correct. The third task is to create two HTML pages, with the first redirecting to the second after 5 seconds, and both pages containing sample text and meta tags.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    16 views5 pages

    BWD Lab-1 en

    Uploaded by

    Era
    This document provides instructions for 3 tasks to complete a basic web design laboratory exercise using the WebStorm IDE. The first task is to create an HTML 4 project called "Lab1" with a file called "Lab1-1" containing sample HTML tags. The second task is to create another HTML 4 file "Lab1.2" in the same project containing code with errors to detect and correct. The third task is to create two HTML pages, with the first redirecting to the second after 5 seconds, and both pages containing sample text and meta tags.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 5

    Basics of Web Design Laboratory Exercise 1

    Laboratory Exercise 1: Introduction


    Intro to the working environment:
    For this course we shall be using an Integrated Development Environment (IDE) called WebStorm
    from JetBrains. You can download a legal copy form the official Jetbrains site, where you should
    dowload the instalation file, install it and register for a license on the JetBrains site. You must use your
    official FINKI e-mail ([email protected])to aquire the license.

    Working with the Environment:


    WebStorm is an IDE that is targeted at using web-based technologies (HTML, CSS, JavaScript, etc.)
    for application development. It has a lot of features, but we shall be using it mostly for its HTML and
    CSS support.
    The complete guide for working with WebStorm can be found at
    https://www.jetbrains.com/webstorm/quickstart/. We encourage the use of the guide for advanced use
    of the IDE.
    A simple guide for creating projects for our course is given:
    1. From the startup window choose Create New Project.

    2. To create the new project, in the dialog we have to set the following parameters:
    • Project name: unique name of the project(e.g. Lab01)

    • Location: the location on the hard drive where the project will be created (you must have
    write permissions to the directory, e.g. My Documents)
    • Project Type: the type of the project. In our case it will be an Empty Project.

    3. After that, the main window will appear, consistin of multiple parts:

    1. Menus and toolbars - the main menu and toolbars let you carry out various commands.
    2. Navigation bar that helps navigate through the project and open files for editing.
    3. The status bar - indicates the status of your project, the entire IDE, and shows various warning
    and information messages.
    4. The editor - here you create and modify the code.
    5. WebStorm tool windows - secondary windows that provide access to various specific tasks
    (project management, source code search and navigation, running and debugging, integration
    with version control systems, etc.).
    Form the Project window (by using right mouse button on the project folder name) or by using
    the File menu, you can create a new HTML file, give it a name (e.g. index) and choose the type
    of the html file (HTML5, HTML or XHTML).
    Task 1: Research the functionalities of WebStorm. Create a project with name Lab1. Create a HTML 4
    document with name Lab1-1 in the project Lab1, and add the following HTML code.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> Прва лабораториска вежба по Основи на Веб Дизајн</title>
    </head>
    <body>
    <h1>
    Веб Дизајн
    </h1>
    <span>Овој текст е составен од </span><b>здебелени </b>
    <em>закосени </em><u> и подвлечени</u><span>букви.</span>
    <br />
    <hr />
    </body>
    </html>

    Run the document in a web browser, and examine the used HTML elements. Correct the document if
    necessary for it to be corrent (e.g. encoding)
    Task 2:
    Create another HTML4 document, named Lab1.2 in the same project. In this document insert the
    following code in the document and using the features in WebStorm, detect and correct the errors in the
    document.
    <html>
    <head>
    </head>
    <body>
    <h1>
    Главен наслов на страната
    <span>Овој текст се употребува за
    </h1>
    пронаоѓање на <b> грешките </em> во <u>кодот .</span>
    <br//>
    <br />
    </body>
    </html>

    Task 3:
    Create two HTML pages. The first one should have the following content:
    • Title: First page for the task 3

    • Keywords: Web Design, FCSE, 2011, HTML, CSS

    • description: This is a test page

    • content: Paragraph with the following text: “In 5 seconds you will be redirected to the next
    page!”
    After 5 seconds, the user should be redirected to the second page.
    The second page should have the following content:
    • title: Second page for task 3

    • keywords: final page, HTML, second page

    • description: This is a second test page

    • Content: Header that will be: “Welcome to the second page.”.

    You should have two paragraphs that have text description about you. Both pages should have the the
    correct meta tags that should enable indexing of search engines, cyrillic text, encoding, Setc.

    You might also like