Computer Science > Web Designing 101

Web Designing 101

Prerequisite(s): No prior knowledge of programming is assumed. A desire to learn and experiment is all that is needed to learn basic HTML and CSS.

Instructor(s): Niraj Pandey
Niraj Pandey

Title: IT Expert

Company: NIESBUD

Website: http://niesbud.nic.in

Niraj pandey is an accomplished IT professional with 6 years of his working experience, His expertise includes: web technologies, mobile applications, open source technologies, data warehousing and more.

Currently employed at NIESBUD, Niraj directs all activities associated with software development, strategic planning and business development. Niraj Pandey holds a Master of Computer Applications degree.
 

, Pratap, Dr. Mahendra
Pratap, Dr. Mahendra

Title: CEO

Company: Progia

Website: http://www.progia.com

Mahendra has a distinguished background as a scientist and as an entrepreneur. Mahendra was employed with AT&T and Lucent Technologies for 20 years where he specialized in video communications, personal computer design, ATM and IP networking.

Mahendra has a PhD in Nuclear Physics and has authored over 2 dozen scientific papers.

, Self Paced Open Education Resource
Self Paced Open Education Resource

Title: The Best Teachers in the World

Progia Staff in consultation with the experts in their respective fields have scoured the open education resources to design and organize this course.

Progia salutes the content authors and their respective education institutes. Progia also acknowledges their expertise and generous contributions for making learning more accessible.



Course Description:

Who should learn HTML and Why should they learn it?

HTML is the language of World Wide Web. All Web Pages are basically written in HTML. That is why your browser can talk to and get information from any Web Server no matter what hardware or software the Web Server may be using.

Therefore a basic understanding of HTML and what makes the World Wide Web work is good for every one.

Learning HTML is specially good for you if:

1. You publish or just participate in conversations on the social Web. Your publication or participation will be more effective, richer in content and you will have finer control over your presentations  if you know the underlying language of the Web, HTML

2. You want to build websites for yourself. Even a small exposure to basic HTML could make all the difference between a great Website and an average one.

3. You are Interested in making great web sites for others and for corporations. Knowing the fundamentals of HTML could be the stepping stone to a whole new world of rich Internet applications that run the corporate web sites today. The advanced skills that you can learn following the basic HTML and CSS skills include: JavaScript, PHP, MySQL, AJAX, Apache.and more.

4. You are itching to write mobile apps for yourself or for others but would like to write it the easy way. Writing it in standard HTML, CSS and Javascript may be the answer you are looking for - a small step from what you will learn in this class.

5. You just want to learn and acquire a useful new skill.

 

What is Covered in the Class

The class is divided into many Units. Just browse the list below to see what topic each Unit covers. Hovering over the title of a Unit shows its description.

Course Sessions:
  • Introduction to Web Designing and How the course is organized
  • Content Author(s): Mahendra Pratap

    Session Description:

    In this Session, Dr. Mahendra Pratap welcomes the Students to this first course in web designing. He introduces the students to the subject of web designing and  gives an overview of what they will learn in this course.

     

    The Handout in this Session provides:

    •     How the Course is organized
    •     Resources for learning more HTML

     


  • Unit 1 Overview of How Web Works
  • Content Author(s): The Vermont Council on Rural Development, Mahendra Pratap, Wikipedia

    Session Description:

    Lecture:

    • Overview of internet, www web pages, home page, web browsers, search engines, web sites and servers

    Video:

    • What is World Wide Web and what you can do with it
    • Basics about how Web works and how you can connect to it.

  • Unit 2 What is HTML
  • Content Author(s): Bob Boiko at the University of Washington

    Session Description:

    In the video, Bob Boiko of the University of Washington shows the big picture

    What is HTML and What it does?

    What is a HTML page and what it has?


  • Unit 2.1 Writing HTML Pages
  • Content Author(s): EricSandersTech, Mahendra Pratap

    Session Description:

    Lecture:

    Structure of an html document, creating an html document, adding body, text and comments, adding lists, adding comments, adding colors, etc. in a web page

    Video:

    Creating your first web page from scratch using Notepad++.

    Handout

    Some useful tips for the Course

    • What you need to write and test HTML: a text editor and a browser
    • How do you open a local HTML file in a browser
    • How can you view HTML code of any web page
    • How do you convert a MS Word document to html

  • Unit 3.1 Tables
  • Content Author(s): Niraj of Nisbud, Mahendra Pratap

    Session Description:

    Tables are essential to HTML documents.

    Besides showing spreadsheet like data in tables, they can also be used to make a page content look better and aligned. They are used for page navigation and menu etc.

    The content of this Session is created by Niraj ..... of Niesbud.

    Video: Dr. Mahendra Pratap shows how to ceate a simple Table using HTML.


  • Unit 3.2 Links
  • Content Author(s): goer.org, Mahendra Pratap

    Session Description:

    Without hyperlinks, the Web wouldn’t be “the Web”. We have explained in Unit 1 how the user can move from one web page to another by clicking on Links. This section explains how to create links to other websites (external links) and links within your own website (internal links).

    The handout shows how to hyperlink elements of a list. This can act like a simple menu on your website.


  • Unit 3.3 Forms
  • Content Author(s): Mahendra Pratap, Wikipedia, Meri Wincgester.

    Session Description:

    Forms are used to collect information from visitors to a website.or for otherwise interacting with the user.

    In this session introduction to Web forms i.e. forms produced with HTML is given. Different input types and buttons are described. How the form is submitted and how action is taken using a script or a program is shown

    The video is from Meri Wincgester. who covers all of these topics in even more details.


  • Unit 4 Style Sheets
  • Content Author(s): WikiBooks, prof Christopher Stein

    Session Description:

    This Session introduces the Student to Cascading Style Sheets (CSS).

    • What is CSS & Why use it
    • How is it applied to HTML documents.
    • How it changes their look and feel?

    The video from Prof Stein presents an excellent introduction to CSS

    The handout gives examples of applying css to various html elements and how it affects them.


  • Unit 5 Media Objects: Image, Audio, Video
  • Content Author(s): Mahendra Pratap, adducation.org

    Session Description:

    Lecture

    Multimedia Objects make web pages more compelling. This sessions shows how you can add  Images, video,  sound and a scrolling text in your web pages

    Video

    Adding multimedia objects to your web page from adducation.org


  • Unit 6 Web Page Layout Using HTML and CSS
  • Content Author(s): Mahendra Pratap, felix.plesoianu

    Session Description:

    So far, we have used HTML to create specific elements such as links, tables etc. In this Session, we will create a container for them all i.e. the web page layout.

    Inside the wireframe, you can put different types of information in the section reserved for that type.

    Rather than using frames or other techniques, we will use more modern way by using CSS.

    Before we do that, students will be first introduced to:

    • HTML element called div and how to style it.
    • The concept of ID and class for referring to HTML elements
    • Creating CSS that applies to HTML elements associated with a specific ID or a specific class
    • CSS properties like float to position HTML elements

    In the the video, Dr. Mahendra Pratap explains why and how to use web page layout. He uses the concepts described in the lecture to create a simple yet effective web page layout.


  • Unit 7 Overview of what we have learnt
  • Content Author(s): Mahendra Pratap

    Session Description:

    A brief overview of what we have learnt in this course is presented.

    It is based on UNC presentation and multiple other OER on this subject.


  • Test Your Knowledge Of HTML
  • Content Author(s): Mahendra Pratap

    Session Description:

    You can use this to assess your understanding of th topics covered in this class.


  • Test Your Knowledge of CSS
  • Content Author(s): Mahendra Pratap

    Session Description:

    CSS works hand-in-hand with HTML. You can use these multiple choice questions to test what you have learnt about CSS in this course.


You are not signed up for this course