Assignment 1(DSL 732)

Website Design and Development

Introduction

This assignment was directed towards making our web pages to make our work visible to ourselves and other.It involves basic html coding and some essential tools to resize images and videos.

Required Tools.

To design a web site these softwares and websites were necessary.


Links for the softwares are given below.


Download sublime text. "this was used for coding and saving .html files".
Download Mamp
Download WinScp."This was used to Upload files and folders to server".
Download Image Magic."This was used to compress images".

Website Design and Development.

I am gonna explain how to create a Basic web site by using steps mentioned below.


Step 1-How to Create .html extension file


To create .html extention file goto

https://www.w3schools.com/

Copy text from HTML Example section as shown in below image


tocopy

Explaination of all basic tags of html


a) DOCUMENT TYPE


1

b) HTML TAG


2

b) "TITLE" TAG


3

For Example:


4

b) "BODY" TAG


5

For Example:


6

Step 2- Open Sublime text and paste the codes which we copied from "w3schools.com", and save the formate in .html extension.


To save goto "File"->> Click on "Save as"->> Select "Save type" i.e HTML(*.html)->> Enter "File Name"-Select File location->> Click on "Save"

Your file will be saved in selected location.


Step 3- How to give reference of any other website.

To give reference of any other website in your website, type as shown in image below

addition

For Example : Below I have given reference to "Google Home page"

Click Here

Step 4- How to add .jpeg file to your website.

If your jpeg file is in a same folder where you have save your .html file, then follow example 1, if location of your .jpeg file is else where then also provide file location as shown in example 2

imag

NOTE: If required please compress file size before uploading file to your website. Many software are available for compressing .jpg file. I have used Imagemagic to compress the .jpg files.


Open ImageMagic->> Click on Open icon to open file needs to be compressed->> Choose jpg file ->> Click on "Open"->> Goto View->>Select Resize->> Enter values of width and height. (Values must be less then [privous values)->> Click Ok->> Save the File in your Desired location


Step 5- How to "Embed videos" from Youtube to your website.

Open "youtube" in your browser->> Play video you want to enbed in your website->>Goto "Share" ->> Select "Embed" from appeared options->> Copy the Codes which appears on window->> Paste the codes to your website where you want videos to be appear.


For Example - I am Embeding "FlexMo Crutches" video on my website by just following the method described above.


Step 6-At this step we will learn how to upload your .html files and other files and folders used to create website. we gonna do that using "WinScp" software.


Open "WinScp" ->> Enter credentials like " Host Name, User Name, Password" then Login->> the window will appear as shown below.
imag

If your server allows you to show your website publically then create "public_html" folder in right side which is server side of winscp window and paste all your template and related document in it, else create "private_html" and paste all required files in it.


-----------------------------------------------------End of Assignment------------------------------------------------.