Web Design – HTML Basic Class | Hello World

안녕하세요 안녕하세요

오늘의 수업 HTML 기본 수업 처음에는 PC 또는 Computer Setup에 대해 알 수 있습니다 우리는 폴더를 만들었습니다 자, 폴더 안에있는 상단보기를 클릭하십시오 그런 다음 옵션을 클릭하십시오 그런 다음 새 폴더 옵션 탭이 열립니다

다시보기를 클릭하십시오 이제 알려진 파일 형식의 확장명 숨기기 왼쪽에 똑딱 거리는 것은 제거되어야합니다 그런 다음 확인 버튼을 클릭하십시오 당신의 일이 끝났습니다 PC 설정이 완료되었습니다

텍스트 문서에서 새 파일을 만듭니다 이제 이름은 indexhtml입니다 우리의 확장은 이제 쉽게 볼 수 있습니다 왜냐하면, 우리는보기로 이동하기 때문에 확장 숨기기 옵션에서 확장이 제거되었습니다

웹 디자인이란 무엇입니까? 즉, 웹 디자인이란 무엇입니까? 즉, 웹 디자인, 웹 사이트는 어떻게 생겼습니까? 웹 디자이너로서의 당신의 직업 완벽한 웹 사이트 템플릿을 만드십시오 즉, 헤더가 메뉴를 가질 것인지, 사이드 바가 있어야하는지, 꼬리말은 무엇을 의미합니까? 코드 편집기 코드 편집기 란, 어디에서 어떤 코드를 작성해야합니다 즉, 웹 디자인을하기 위해서는 코드를 알고 배우거나 우리는 코드 편집기를 선택했다 비주얼 코드 스튜디오 할 수있는 일이 많이 있습니다

코드 편집기를 사용할 수 있습니다 예를 들면 : Notepad ++ 숭고한 코드 편집기 등 코드 편집기 다운로드 및 설치 HTML이란 무엇입니까? 즉, HTML이란 무엇입니까? HTML은 하이퍼 텍스트 마크 업 언어입니다

그렇지 않으면 웹 디자인을 할 수 없습니다 태그 열기 및 닫기 HTML을 우리에게 쓸 때 태그를 여는 것이 필요합니다 그리고 닫는 태그를 사용하십시오 태그 : 제목 및 단락 우리는 H1에서 H6으로 시작합니다

총 6 개의 표제 태그를 사용할 수 있습니다 첫 번째 태그부터 마지막 ​​태그까지의 제목 태그 연속 쓰기는 계속 작을 것입니다 즉, 내가 H1에서 내려 오 자마자, 텍스트가 작을수록 좋습니다 이 수업은 오늘 여기서 끝날 것입니다 다음 학급에서 다시보세요

Basic HTML for Web Design : Web Design Alt Text

나는 이미지를위한 대체 텍스트에 대해 이야기하기 위해 약간의 시간을 갖고 싶다 그리고 이것들은 정말로 중요하다

많은 브라우저가 사람들이 설정할 수없는 이미지 나 설정을 표시하지 않기 때문에 이미지를 표시하고 이미지에 텍스트가 있으면 그들에게 우리가 바로 여기에이 로고 살펴 보겠습니다 것을 놓칠 수 있기를 원하고 나는이 없습니다 죄송합니다 샘플 로고입니다 이미지 파일과 비슷하지 않습니다 당신이 알고있는보고있는 장애인은 그곳에 이미지가 있다는 것을 볼 수 없었습니다 샘플 로고는 대체 텍스트 또는 대체 텍스트를 추가하려고합니다

그래서 우리는 간다 여기서 이미지가 바로 여기에 jpeg와 같은 샘플을 가진 이미지 소스가 있습니다 그리고 우리 대체 텍스트를 추가하고 싶습니다 그래서 우리는 단어 alt를 문자 alt equals에 입력 한 다음 인용문을 입력합니다 마크를 추가하고 샘플 로고를 추가하고 싶습니다

그래서 그들은 그 이미지가 실제로 샘플이라는 것을 압니다 심벌 마크 그리고 그들이 독서와 같은 것을 가지고 있다면, 당신은 그것을 알고 있습니다 로고와 함께 시작한다고 말할 수있는 페이지가 있습니다 샘플 로고를 입력 한 다음 텍스트로 이동하십시오

그리고 당신은 텍스트가 거기에 있음을 볼 수는 없지만 if 우리는 빈 공간 대신 ​​이미지를 숨기려고했습니다 html 텍스트 샘플 로고

Basic HTML for Web Design : Right & Center Align Horizontal Rules in HTML

이제 수평 규칙을 왼쪽에 정렬하는 방법을 보여 줬습니다 그러나 그것은 정말로 귀하의 웹 페이지의 오른쪽에도 쉽게 할 수 있습니다

유일한 차이점은 해야 할 일은 수평 규칙에서 왼쪽으로 정렬하도록 설정 한 것입니다 왼쪽에서 오른쪽으로 맞 춥니 다 저장하면이 페이지가 새로 고침됩니다 그리고, 이제 보여줍니다 페이지의 오른쪽에있는 여기에 있습니다

이제 기본값으로 되돌리려면 align 속성을 모두 가져 오거나 센터로 정의 할 수 있으므로 알 수 있습니다 중앙 정렬됩니다 그래서 나는 그것을 구할 것이다 나는 그것을 다시 볼 것이고 그것은해야한다 중심에 서십시오

Basic HTML for Web Design : Setting Fonts in HTML

이제 전체 웹 페이지의 글꼴을 정의하는 것이 매우 쉬울 것입니다 이미 가지고있는 "GO (진행)"버튼에서 내 로고와 일치하는 좋은 산 셰리프를 선택하십시오

과 그래서 나는 나의 페이지의 맨 꼭대기에 여기 올라갈 것이고, 나는 나의 머리글과 나의 이미지를 가지고있다 여기, 나는 첫번째 이미지 다음에, 정말로 첫 번째 텍스트에 이르기를 원한다 이리 그리고 여기에서 필자는 글꼴 서체를 정의 할 것입니다 그래서 나는 여기에 들어가서 할거야

font face = "helvitica, arial", 그리고 나는 페이지의 맨 아래로 갈 것입니다 그 태그를 닫으려고 우리는 / 폰트를 작성하고 저장합니다 그러면 여기를 새로 고칩니다 이미 완료되었습니다

이 모든 본문은 이제 산 세리프가되어 약간 일치합니다 좋아, 그래서 좋아 보인다

Basic HTML for Web Design : Web Design Background Image Creation

이제 웹 사이트에 배경 이미지를 넣기 위해 노력할 것입니다 그러나 우리가 그렇게하기 전에, PhotoShop에서 실제로 배경 이미지를 만들겠습니다

이 기회를 활용하겠습니다 파일 크기와 RGB 스펙트럼 및 기타 필요한 것들에 관해서 이미지를 웹에 업로드하는 동안 명심하십시오 그래서 우리는 시작할 것입니다 나는 새 문서를 만들거야 그것을 백 픽셀로 100 개 만들자

그래서 그건 너비와 높이 그리고 여기서 우리는 결의안을 볼 것입니다 그리고 몇 가지가 있습니다 이미지의 해상도를 확인할 수있는 여러 가지 방법 그러나 웹 사이트의 표준은 1 인치당 72 픽셀 또는 PPI가 있습니다

실제로, 실제로는 매우 작습니다 다른 이미지 파일로 그러나 인터넷에서 볼 수 있기 때문에 실제로는 볼 수 없습니다 텔 그것은 단지 컴퓨터 화면에 있습니다

너도 알다시피, 이걸 인쇄하면된다 모든 것이 고르지 않게 보일 때 픽셀을 볼 수 있습니다 그리고 나서 컬러 모드에서 인쇄용 CNYK와는 대조적으로 RGB가되도록 할 것입니다 과 그레이 스케일이되기를 원한다면 그레이 스케일이 될 수도 있지만, 우리는 단지 할 것입니다 지금 당장 RGB

나는이 파일을 만들고 내 배경 이미지를 말할 것입니다 나는 희미한 노란색 폴카 도트를 원한다고 말할 것입니다 그래서, 그냥 던지기 만 할거야 이게 당신을 위해 정말 빠릅니다 그리고 거기에 노란색 폴카 도트가 있습니다

그거야 내 배경 이미지로

Basic HTML for Web Design : Change Single Text Color in HTML

그래서 우리는 우리의 기본적인 텍스트 색상을 꽤 많이 가지고 있고 우리의 활성 색상과 방문한 링크 및 기타 링크 이제 한 단어 만 바꾸고 싶다고 가정 해 봅시다 단락의 텍스트 색상 그리고 그렇게하기 위해 우리는 들어갈 것입니다 – 그래서 우리는 온 몸을가집니다

텍스트를 검정색으로 설정하면 문서의 모든 텍스트가 표시되지만 그렇지 않습니다 의미심장 한 것이 아닙니다 여기 두 번째 단락에서 두 번째 줄을 말하자 우리는 그 문장을위한 글꼴의 색깔을 바꾸고 싶다 그래서 우리는 여기에 들어가서 윗줄, 꺽쇠 괄호, 글꼴, 공백, 색, 인용 부호 및 글꼴 색상을 입력하십시오

우리는 원한다 ff0033을 한 다음 다른 인용 부호와 꺽쇠 괄호를 사용하겠습니다 그리고 나서 우리가되고 싶은 문장 (붉은 색), 그래서 빨간색 문장 뒤에, 우리는 다른 꺽쇠 괄호를 사용하고, / font로 그 태그를 닫을 것입니다 우리는 간다 그리고 우리는 그것을 살릴 것이고, 우리는 텍스트로 가서 미리 볼 것입니다

그리고 여기 두 번째 단락에서 두 번째 줄에 해당 텍스트가 빨간색으로 변경되었습니다 그리고 너 한 글자, 한 단어 또는 한 번에 단락으로이 작업을 수행 할 수 있습니다 당신이 컨테이너 사이에 가지고있는 것

Basic HTML for Web Design : Removing Image Borders in HTML

이제 우리는 색상과 이미지에 대해 조금 알았습니다 우리는 다시 버튼을 링크로 사용할 때 이전에 만든 버튼 그래픽 텍스트

그리고 기억한다면 주변에 정말 추한 경계가있었습니다 어떤 디자인에서는 괜찮 았지만,이 버튼은 정확하지 않았습니다 그리고 만약 당신이 바로 여기 보이는, 너는 내 단추, 내 링크 색을 분홍색으로 바꿨다 이제 경계선이 버튼이 분홍색으로 변했습니다 그래서, 제가하고 싶은 것은이 링크에 들어가서 그냥 제거하는 것입니다

그 국경의 그리고 우리가 여기에 들어가면 바로 링크 자체에 대한 제 텍스트가 있습니다 링크가있는 AA thref이고 이미지 소스가 있습니다 그리고 우리가 이미지 안에 들어가면 소스 브래킷, 실제 이미지 바로 다음에 border라는 단어를 입력하십시오 과 그것이하는 일은 경계가 얼마나 넓어야 하는지를 알려주는 것입니다

그리고 우리는 0으로 설정하면 테두리가 없어야합니다 그래서 우리는 그것을 구할 것입니다 다시 여기로 들어가서 새로 고침하고 경계선이 사라진 것을 보아라

Basic HTML for Web Design : Web Design File Organization

앞으로 더 나아 가기 전에 파일을 정리하는 방법에 대해 이야기 할 것입니다 특정 위치에 업로드하는 것이 매우 중요합니다

업로드 할 때 웹 사이트에, 당신은 그것을 가지지 않고 완벽하게 갈 수 있기를 원합니다 링크 나 이미지 파일 등을 다시 링크하십시오 그리고 맞아 이제 파일이 "샘플 웹 사이트"로 바탕 화면에 저장됩니다 새 폴더를 만들겠습니다

또한 "샘플 웹 사이트"라고도합니다 그리고 파일 이름을 만들 때 항상 기억하고 싶습니다 오, 나는 그것을 할 수 없다고 생각한다 우리는 이것을 "샘플 웹 사이트 폴더"라고 부를 것이지만 기억하고 싶습니다 HTML에있을 파일의 파일 이름을 만들 때 이미지 파일 또는 실제 HTML 파일 자체에 공백이나 브라우저를 사용할 수 없습니다

그것을 인식하지 못합니다 이제 "샘플"을 "샘플 폴더"라고하겠습니다 그럼 우리가 열거야 이것으로 내 웹 사이트를 끌어 들일 수 있습니다 이제 샘플 웹 사이트가 있고 미리로드 된 파일이 있습니다

이 웹 사이트에서 사용할 이미지 그래서 내가 원하는 파일에 추가하기 전에 그들이 실제로 올바른 장소에 있는지 확인하십시오 그래서 저기, 저것이 있습니다 여기에서 우리는 계속 일할 것입니다

Basic HTML for Web Design : Vertical Align Tables in HTML

이제 테이블 정렬 너비와 높이를 텍스트 정렬로 조정할 수있게되었습니다 세포 안에

그러기 위해서 나는 첫 번째 세포로 갈거야 내 첫 번째 콘텐츠 및 그 테이블 열은 이미 거기에있는 td를 수행 할 것이고, 아래와 같은 것을 정렬 할 것입니다 인용문 다음에, 색상이 정의 된 후에, 나는 align equals를 할 것입니다 상단

이제는 기본값으로 설정되므로 우리는 그 모양이 무엇인지 이미 알고 있으므로 저장합니다 그리고 그것을 새로 고칩니다 나는 그것을 실제로 저장한다 내 테이블 열 셀에 들어가서 그것은 td를 할 것입니다 td를 할 것입니다

v 수직 정렬은 따옴표와 같습니다 최고 끝 따옴표 그리고 그 다음에 나는 다시 바닥을 재편성 할 것이다 저장하십시오 보시 다시 여기로 가세요 기본 설정은 중앙이지만 선택하면 하단 또는 상단에 정렬 할 수 있습니다