GILBERT KOFI GRUNITZKY - WEBSITE DEVELOPMENT: HTML AND CSS

HTML LECTURE

LESSON 1:

THE FIRST THING WE SUPPOSE TO DO IS TO DOWNLOAD NOTEPAD++. GO TO GOOGLE AND TYPE INTO THE SEARCH BOX DOWNLOAD NOTEPAD++ AND CLICK ON THE SEARCH BUTTON. WAIT FOR THE RESULT TO POP UP AND CLICK ON THE FIRST LINK THAT APPEARS. FOLLOW THE STEPS HIGHLIGHTED IN THE SITE TO DOWNLOAD THE NOTEPAD++. AFTER YOU DOWNLOAD THE NOTEPAD++, RUN THE EXECUTABLE FILE AS AN ADMINISTRATOR, A WIZARD WILL POP UP, JUST FOLLOW THE THEWIZARD TO INSTALL THE NOTEPAD++.

LESSON 2:

IN THIS LESSON WE ARE GOING TO RUN THE NOTEPAD++ AND THEN WRITE SOME FEW LINES OF CODE IN HTML. NOW , GO TO YOUR HOME AND CLICK ALL PROGRAMS OR TYPE NOTEPAD++ INTO THE SEACHBOX. NOTEPAD++ WILL APPEAR AS A RESULT AFTER THE SEARCH OR IT WILL POP UP IN THE LIST OF PROGRAMS. CLICK ON THE ICON OF THE NOTEPAD++ TO LUNCH THE APPLICATION . WAIT TILL THE PROGRAM OPEN AND OKAY WE ARE GOOD TO TYPE SOME CODES.

IN HTML CODING, THE FIRST THING WE ARE SUPPOSE TO IS TO CREATE A NEW FILE AND SAVE IS IN HTML FORMAT. THIS CAN BE ACHIEVE BY CLICKING ON THE FILE MENU ON THE TOP LEFT CONER OF THE WORK AREA AND CLICK ON SAVE AS. A WIZARD WILL POP UP ASKING THE NAME OF THE FILE AND THE FORMAT IN WHICH YOU WANT TO SAVE THE DOCUMENT. FOR THE NAME OF THE FILE YOU CAN WRITE ANYTHING AND WHERE YOU ARE SUPPOSE TO CHOOSE THE FORMAT OF THE DOCUMENT CLICK ON THE DROPDOWN MENU AND LOOK OUT FOR HTML AND CLICK IT THEN SAVE.

NOW LETS GET INTO CODING. IN WEBDEVELOPMENT HTML, THE FIRST THING TO DO FIRST IS TO SPERCIFY THE DOCUMENT TYPE. THIS CAN BE ACHIEVE BY TYPING . THIS SIMPLY MEANS THAT IS DOCUMENT IS OF HTML FORMAT. BENEIT THE , WE HAVE TO INTRODUCE

. BASICALLY , DEFINES THE ENTIRE SITE OR IT IS A FRAME THAT HOLE THE ENTIRE SITE. INSIDE THE FRAME, WE NEED A TAG FOR HEAD AND BODY. BELOW IS HOW IT IS DONE;

THE ABOVE IS THE ENITIRE STRACTURE OF A WEBSITE. IN BETWEENT THE HEAD TAG, WE HAVE TITLE, CSS, STYLE AMONG TOHERS AND WITHIN THE BODY WE WILL FIND WHAT IS IN THE ENTIRE SITE. IT COULD BE PICTURES, VIDEOS, MUSIC, TEXT, LINKS AMONG OTHERS. WE CAN AS WELL DO LANGUAGE SPERCIFICATION FOR OUR SITE AND IT CAN BE ACHIEVE BY WRITING . WITH IS TYPE OF CODE YOU WILL BE ABLE TO SPERCIFY THE LANGUAGE TYPE TO ENLISH. FOR HOW IT IS DONE, SEE THE ABOVE CODE. NOW WHAT WE NEED TO DO NEXT IS TO ADD A MEDI TAG TO DEFINE THE CHARRACTER SET AND ADD TITLE AND LINK TO CSS FILE. NOTE ADDING THE MEDI TAG IS NOT COMPUSARY. WHAT IS THE MEDI TAG DO IS TO PROVIDE OTHER INFORMATIONS THAT YOUR SITE NEED. THE TITLE WILL CAUSE NAME OR THE WORD IN BETWEEN THE TITLE TO APPEAR ON THE TAB OR THE TITLE BAR OF YOUR BROWSER AND THE LINK TAG PROVIDES REFERENCE TO OUTSIDE FILE. NOTE: rel STANDS FOR RELATIVE AND IT ACTUALLY TELLS HOW THE LINK IS RELATED TO THIS WEBSITE AND FOR US TO IDENTIFY THE FILE, WE HAVE TO USE href=major.css . BELOW IS HOW IT CAN BE DONE;

NOW LET SEE HOW OUR WEBSITE LOOKS. HOLD ctrl + s ON YOU KEEYBOARD TO SAVE YOUR WEBSITE AND THEN CLICK ON RUN AND IN CHROME TO VIEW YOUR WEBSITE. YOU WILL SEEE THE TITLE AND EMPTY BODY WHICH WILL APPEAR BLANK.

Lesson 3:

IN THIS LESSON WE ARE GOING TO DEAL WITH THE BODY. MOST WEBPAGES ARE DIVIDED UP.THE DISIVION ALWAYS LOOK SIMILAR TO ONE ANOTHER.NOW LET SEE WHAT ACTUALLY GOES INTO THE BODY TAG, THE BODY TAG AS I HAVE SAID EARLIER CONSIST OF THE MAIN LISTING OF YOUR MEBSITE. THESE INCLUDE; HEADER, NAVIGATION BAR, MAIN CONTENT, FOOTER AND SIDE BARS. WE WILL BE CONSIDERING THE HEADER. NOTE THAT THE HEADER IS DIFFERENT FROM THE HEAD USED BEFORE THE BODY.THE HEADER INCLUDES THE TITLE OF YOUR WEBSITE AND THE LOGO. TO GIVE YOUR WEBSITE A HEADER, YOU HAVE TO INDRODUCE AN OPENNING HEADER TAG

AND A MACHING CLOSE TAG UNDER THE BODY AND IN BETWEEN THE HEADER TAG, YOU INTRODUCE THE TEXT YOU WANT TO SHOW IN THE HEADER OF YOUR WEBSITE. YOU CAN SPECIFY THE SIZE OF THE TEXT BY INTRODUCING AT THE END OF THE TEXT BEFORE THE MACHING CLOSE TAG OF THE HEADER.NOTE: WE HAVE , , , , and FOR THE SIZE OF YOUR TEXT.IT RANGES FROM THE HIGHEST TO THE LOWEST RESPECTIVELY .NOW, SAVE THAN RUN IT IN CHROME TO VIEW. BELOW IS HOW IS DONE:

body>

THE NEXT THING I WANT YOU KNOW ABOUT IS THE NAVIGATION TAG.THIS IS MOSTLY USE TO PROVIDE A LINK TO OTHER PAGES IN YOUR WEBPAGE.THE NAME OF THE TAG USE IS THE NAV TAG. IT USE TOGETHER WITH UL TAG AND LI TAG IN ORDER TO MAKE THE NAVIGATION AN ORDERED LIST. BELOW IS HOW IT IS USE:

body>

• HOME
• NEWS
• NEW TECHNOLOGY

NEXT THING WE SUPPOSE TO DO IS TO INDRODUCE THE SECTION WHERE ALL THE MAIN CONTENT OF THIS SITE IS STORE BUT BECAUSE OF TIME FACTOR, WE WILL DO IT IN THE NEXT LESSON. SO EVEN IF WE INTRODUCE THE SECTION TAG IN THIS LESSON WE WILL NOT INCLUDE ANY CONTENT IN IT. HENCE , LET US MOVE TO THE NEXT TAG WHICH IS ASIDE BAR.THE ASIDE BAR INCLUDES WHAT WE CERTAIN INFORMATION THAT YOU DONT WANT TO INCLUDE IN YOUR MAIN CONTENT. THESE INFORMATION MIGHT INCLUDE; NEWS, A FUNNY STORY, UPDATE AMONG OTHERS. TO USE THE ASIDE BAR YOU ONLY HAVE TO INTRODUCE THE OPENNING ASIDE TAG AND MACHING ASIDE TAG AND IN BETWEEN THE ASIDE BAR, YOU CAN WRITE WHAT EVER TEXT YOU WANT TO SHOW IN THE ASIDE BAR. BELOW IS HOW IT IS USE:

body>

• HOME
• NEWS
• NEW TECHNOLOGY

NEWS

THE LAST THING THAT WE WILL BE TALKING ABOUT IN THIS SECTION IS THE FOOTER. THE FOOTER CONTAINS INFORMATION AT THE BOTTOM OF THE SITE. THESE INFORMATION INCLUDES; THE COPY RIGHT LAW, YOUR COMPANY NAME, TERMS AND CONDITIONS, SERVICE AMONG OTHERS. NOW LET US LEARN HOW TO USE IT.TO INTRODUCE THE FOOTER, THE FIRST THING FIRST IS TO INTRODUCE THE OPENNING OF THE FOOTER TAG AND THEN ADD THE TEXT THAT YOU WANT TO SHOW IN THE FOOTER AND INTRODUCE THE CLOSSING FOOTER TAG. BELOW IS HOW IT IS USE:

body>

• HOME
• NEWS
• NEW TECHNOLOGY

NEWS

Lesson4:

IN THIS LESSON, WE ARE GOING TO TALK ABOUT THE SECTION TAG INTRODUCED IN THE CODE. AS WE EARLIER INFORMED YOU GUYZ, IT HOLDS THE MAIN DOCUMENTS ON A WEBPAGE.WE WILL BE DEMONSTRATING HOW IT WORKS IN A MINUTE. BELOW IS HOW IT IS DONE;

body>

• HOME
• NEWS
• NEW TECHNOLOGY

TO BE A WEBDEVELOPER YOU MUST SERIOUS AND DETERMINE

- THIS IS WRITTEN BY GENERAL.

NEWS

NOW, LET US BREAK DOWN THE CODE ABOVE. NOTE THAT WE ARE ONLY GOING TO FOCUS ON THE SECTION ASPECT OF THE CODE. AS YOU KNOW, THE SECTION TAG SERVES AS A CONTAINER THAT HOLDS THE MAIN DOCUMENTS ON A WEBPAGE. WE CAN NOT START TO PUT DOCUMENTS ON A WEBPAGE WITHOUT INTRODUCING THE REQUIRED TAGS. FOR THAT REASON, WE NEED COUPLE OF TAGS TO GET THAT TASK ACCOMPLISHED. THIS IS WHY WE FIRST INTRODUCE THE SECTION TAG IN LINE TWENTY SIX OF THE CODE ABOVE. NEXT ON LINE TWENTY SEVEN OF THE CODES ABOVE, YOU WILL REALIZE WE INTRODUCE A TAG CALLED ARTICLE. THIS TAG DETERMINES THE ORDER IN WHICH INFORMATION OR DOCUMENTS CAN BE POSITIONED ON WEBPAGE.THE ARTICLE TAG HOLDS HEADER INFORMATION, THE PARAGRAPH INFORMATION, FOOTER INFORMATION OR DOCUMENTS AMONG OTHERS. THE HEADER TAG HOLDS HE TITLE OF DOCUMENTS OR INFORMATION. SOMETIMES, IT CONTAINS TITLE AND SUB TITLES. AND IF THAT IS THE CASE, IT IS NEEDED TO BE GROUP TOGETHER FOR THE COMPUTER TO BE ABLE TO DIFFERENTIATE THEM FROM ONE ANOTHER. THE TAG NORMALLY USED TO ACCOMPLISH SUCH TASK IS HGROUP AS USED IN LINE TWENTY EIGHT OF THE CODES ABOVE.THE NEXT THING THAT I WANT US TO LOOK AT IS THE PARAGRAPH TAG OF THE CODE.WHAT THE PARAGRAPH TAG DOES IS TO HOLD THE MAIN BODY OF THE WEBPAGE. AFTER THE PARAGRAPH IS THE FOOTER. THE FOOTER CONTAINS DOCUMENT RELEVANT TO THE HEADER AND PARAGRAPH OF THE CODE. IN THIS CODE, IT HODES THE AUTHOR OF THE DOCUMENT. WE CAN ACUALLY COPY THE ENTIRE ARTICLE TAG AND PASTE IT BELOW THE ENDING TAG OF THE FIRST ARTICLE TAG.THE REASON BEING THAT THE SECTION TAG CAN HOLD MORE THAN ONE ARTICLE TAG. NOW SAVE YOUR WORK AND RUN IT TO SEE HOW OUR WEBSIE LOOK.

Next page