Assignment 1
Website Design and Development
This week I started working on the design and development of a website for myself which will help me to document the process of development.
Creating a Basic Template
Softwares Used
Here are the few softwares which I have used for the process:
- Sublime Text Editor
For editing the html files, a text editor is needed and Sublime Text Editor seems to be one of the good text editors which will help in making the process easy.
- MAMP
MAMP stands for ‘Mac Apache MySQL PHP’. It is used to test the files on our local browser before we upload it on the actual server. This is extremely helpful because uploading files again and again on the server is time consuming. MAMP gives instant editing results.
- WinSCP
WinSCP is a free and open-source client for Microsoft Windows. Its main function is secure file transfer between a local and a remote computer.
Basic HTML Tags
- Paragraph Tags <p></p>
Used for paragraph spacing
Eg: <p> This is a paragraph </p>
- Break Tag <br>
Used for pushing the text to next line
Eg : <p> This is an Example of <br> </p>
- Heading Tags <h#>
Used for different sized headlines varying from <h1> being the largest to <h6>, the smallest
Eg : <h1> This is a heading </h1>
For Adding Media
- Image Tag
Eg: <img src="images/picture_name.jpg"
- Video Tag
Eg: <video width="200px" height="" controls autoplay>
<source src="videos/video_name.mp4" type="video/mp4">
</video>
- For Adding Youtube Videos :
- Go to the video
- Click on the share button for the particular video
- Click on ‘Embed’ to get the autogenerated html code
- Copy and paste it in the required place
Editing the HTML Files
Different files used for the website development are:
- index.html
Homepage of the website.
- about.html
Basic details about myself
- assignments.html
Different assignments are added here with link to its html file
- project.html
Details regarding the project proposal and the final project
Compressing Images and Videos
Since I've been using photoshop for a long time, I felt Adobe Photoshop as the easy tool for compressing images to upload in website without compromising much on the quality of the image.
Steps to compress images
1. Open image file from File->Open or using shortcut key Ctrl+O in Adobe Photoshop
2. Try to change the resolution by right clicking on the image file and -> Resolution
3. Click on File->Export->Save for Web. This feature can be used to save images with lower file size.
4. Adjust the quality of the image as shown and the file size will be shown below the image.
1. File size of the image is reduced drastically.
Compressing Videos
Wondershare free Video converter is a freeware used for video conversion and compression. I used this software to compress the video as well as to change the file type to mp4 to upload in youtube.
This is quite an easy task to do. Open the video to be compressed in the software, select the output source filetype and quality. Click on 'Convert'. You're done!!
Uploading file to the IITD Server
As I have mentioned earlier, WinSCP is the tool used to upload html files to the web server of IITD. To connect to the server, login with institute user name and password with the host name and port number as shown below
Host Name: ssh1.iitd.ac.in
Port Number: 22
After login, created a folder with the name “private_html” as the PG students have only access to the website within the campus and copied the edited html files from the local computer ( left side tab) to the server (right side tab) and tested it with url :
Finally created my first website with the basic html code
Final Output
With the basic coding knowledge I was able to make changes according to my requirements to the final template which was downloaded from internet.
